JavaScript 事件处理:常见代码与优化

Code80

function handleClick(event) {
  console.log("Button clicked!");
}
document.getElementById("myButton").addEventListener("click", handleClick); 

这段代码中,我们为页面上的一个按钮添加了一个点击事件监听器,当用户点击该按钮时,控制台将输出 "Button clicked!"。

常用代码

1、使用 addEventListener 添加事件监听器时,可以使用第三个参数来指定事件处理函数的执行上下文。

document.getElementById("myButton").addEventListener("click", handleClick, false); 

2、使用 removeEventListener 方法移除事件监听器。

document.getElementById("myButton").removeEventListener("click", handleClick); 

3、使用 Event 对象来获取事件的相关信息,

function handleClick(event) {
  console.log("Button clicked!");
  console.log("Event type: " + event.type); // 输出事件类型
  console.log("Event target: " + event.target); // 输出触发事件的元素
} 

优化代码

1、使用箭头函数可以避免使用 event 参数时出现的问题,箭头函数不会创建自己的 this 上下文,因此可以使用 this 来访问触发事件的元素。

document.getElementById("myButton").addEventListener("click", () => console.log("Button clicked!")); 

2、使用 addEventListener 的第三个参数 passive 可以提高事件处理函数的性能,当设置为 true 时,浏览器会优化滚动事件的性能,减少重绘和重排的次数。

document.getElementById("myScrollArea").addEventListener("scroll", handleScroll, true); 

3、在事件处理函数中,可以使用 event.preventDefault() 方法来阻止事件的默认行为。

function handleClick(event) {
  event.preventDefault(); // 阻止默认行为,例如链接的跳转等
  console.log("Button clicked!");
} 
《JavaScript 事件处理:常见代码与优化》.doc
将本文下载保存,方便收藏和打印
导出文档