JavaScript事件的监听首先要了解以下原则:
侦听事件函数不能带入任何参数
侦听事件函数有且仅有一个参数e就是事件接收到事件对象,其他函数没有
element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕获);
element.removeEventListener(‘事件名’,事件函数名,事件冒泡/捕获);
当浏览器为ie8及以下,则应分别为:
element.attachEvent(‘on开头的事件名’,事件函数名);
element.detachEvent(‘on开头的事件名’,事件函数名);
var num=0; var bn=document.querySelector("button"); bn.addEventListener("click",clickHandler1); bn.addEventListener("click",clickHandler2); bn.addEventListener("mousemove",clickHandler2); function clickHandler1(e){ num++; console.log("aaa"); if(num>1){ // this是事件侦听的对象 // e.currentTarget.removeEventListener("click",clickHandler1); this.removeEventListener("click",clickHandler1); } } function clickHandler2(e){ // console.log("bbb"); console.log(e.type) }
需要注意的是:
DOM0级:
? 一个标签的同一事件只能绑定一个事件函数
? 事件可以直接添加在行内
? 各大浏览器都支持,不存在兼容性问题
DOM2级
? 一个标签的同一事件可以绑定多个事件函数
? 绑定的事件函数必须有名字,否则无法删除
? 存在兼容性问题,IE8及之前版本写法和标准浏览器的写法不一样
原文:https://www.cnblogs.com/tokkipopo/p/12657311.html