js中addEventListener()与removeEventListener()用法案例分析

2023-07-29 23:19:04 182

本文实例讲述了js中addEventListener()与removeEventListener()用法。分享给大家供大家参考，具体如下：

所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法，用于追加事件和删除追加。

接受参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。(3个)

最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false;

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将

元素插入到

元素中，用户点击

元素,哪个元素的"click"事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发，然后再触发

元素的点击事件。

假如在一个按钮上添加一个点击事件，代码如下：

varbtn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

varbtn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("HelloWorld");
},false);

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：

varbtn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.removeEventListener("click",function(){//无效！
alert(this.id);
},false);

在这个例子中，removeEventListener无法删除addEventListener所追加的事件，因为两个方法并不相等，内存地址已经是不同的，如下面的例子所示：

varbtn=document.getElementById("myBtn");
varhandler=function(){
alert(this.id);
};
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);//有效！

案例：

div元素添加了onmousemove事件句柄，鼠标在桔红色的框内移动时会显示随机数。
点击按钮移除DIV的事件句柄。
点我

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js中addEventListener()与removeEventListener()用法案例分析

热门推荐

随机推荐