Js进阶20-事件监听

最新推荐文章于 2024-08-11 18:40:36 发布

晴雪月乔

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量70

点赞数

分类专栏： Js进阶文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_57521762/article/details/130430696

版权

Js进阶专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章对比了传统事件绑定方法，如onload、onclick等，与使用addEventListener的方法。传统方式存在覆盖问题，而addEventListener允许添加多个事件并控制事件处理的阶段（捕获或冒泡）。addEventListener的优势在于其可复用性和灵活性。

摘要由CSDN通过智能技术生成

一、传统事件绑定方法

传统事件绑定方法事例如下：

window.onload = function () {
  alert("页面加载完毕");
}
document.getElementById("btn").onclick= function () {
  alert("按钮被点击");
};
document.onmousemove = function () {
  console.log("鼠标在移动");
};

(1) 事件名称之间一定要加上 on，比如：onclick、onload、onmousemove。

(2) 当同一个元素绑定多个事件时，只有最后一个事件会被添加，并且传播模式只能是冒泡模式。

二、addEventListener

window.addEventListener('load', init, false);
function init(){
  alert("页面加载成功");
}
// 下面写法与上面等价
window.addEventListener('load', function () {
  alert("页面加载成功");
}, false);

(1) element.addEventListener(event, function, useCapture) 中的第3个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。

(2) addEventListener 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。

(3) addEventListener 在绑定事件的时候，事件名称之前不需带 on 。