DOM2 Events 为事件处理程序的赋值和移除定义了两个方法:addEventListener() 和 removeEventListener()。这两个方法暴露在所有的DOM节点上。它们接收3个参数:事件名、事件处理函数和一个布尔值,true表示在捕获阶段调用事件处理程序,false(默认值)表示在冒泡阶段调用事件处理程序。 以按钮添加clikc时间处理程序为例,可以这样写:
let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
console.log(this.id);
},false);
以上代码为按钮添加了会在事件冒泡阶段触发的onclick事件处理程序(因为最后一个参数值为false)。与DOM0方式(btn.onclick=function(){console.log("Clicked")})类似,这个时间处理程序同样在被附加到的元素作用域中运行。使用DOM2方式的主要优势是可以为同一个事件添加多个时间处理程序。来看下面的例子:
let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
console.log(this.id);
},false);
btn.addEventListener("click",()=>{
console.log("Hello world!");
},false);
这里给按钮添加了两个事件处理程序。多个事件处理程序以添加顺序来触发,因此前面的代码会先打印元素ID,然后显示消息“Hello world!”。
let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
console.log(this.id);
},false);
// 其他代码
btn.removeEventListener("click",()=>{ // 没有效果
console.log(this.id);
},false);
这个例子通过addEventListenter()添加了一个匿名函数作为事件处理程序。然后,又以看起来相同的参数调用了removeEventListener()。但时间上,第二个参数与传给addEventListener()的完全不是一回事。传给removeEventListener()的事件处理函数必须与传个addEventListener()的是同一个,如下面的例子所示:
let btn = document.getElementById("myBtn");
let handler = function(){
console.log(this.id);
};
btn.addEventListener("click",handler,false);
// 其他代码
btn.removeEventListener("click",handler,false); // 有效果
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!