dom.addEventListener(事件名称,事件处理函数,布尔值)
参数
- 事件名称 是一个字符串，需要加引号
- 事件处理函数（事件句柄函数）既可以是命名函数，也可以是匿名函数
- 布尔值
- true 事件处理函数是在事件的捕获阶段发生的
- false 事件处理函数是在事件的冒泡阶段发生的（默认值，如果不写默认为false）
特性
- 可以通过第三个参数-布尔值来对事件处理函数调用的时机进行操控
- 既可以调用命名函数，也可以调用匿名函数（最好为命名函数）
btn.addEventListener('click',function(){ console.log(1); },false); btn.addEventListener('click',fn1,false); //调用时直接写函数名称即可 function fn1(){ console.log(1); };
可以给元素添加多个事件，且不会互相覆盖:
btn.addEventListener('click',function(){ console.log(1); },false); btn.addEventListener('click',function(){ console.log(2); },false); //这段代码最后会在控制台同时输出1和2
this指向当前元素:
<body> <input type="button"> </body> btn.addEventListener('click',function(){ console.log(this); //<input type="button"> },false);
移除方法dom.removeEventListener(事件名称,事件处理函数,布尔值)
直接移除:
btn.addEventListener('click',fn1,false); function fn1(){ console.log(1); //事件绑定被移除，无论怎么点击按钮都无法在控制台输出内容 }; btn.removeEventListener('click',fn1,false);
执行一次后移除:
btn.addEventListener('click',fn1,false); function fn1(){ console.log(1); //事件执行一次后被移除，只会输出一次1 btn.removeEventListener('click',fn1,false); };
注意：
- 该方法无法移除匿名函数的事件绑定
- 故在使用该方法时事件处理函数最好为命名函数
btn.addEventListener('click',function(){ // 匿名函数 console.log(1); //这里重复点击还是会在控制台输出1 },false); btn.removeEventListener('click',function(){ // 匿名函数，但与上述匿名函数不是同一个函数 console.log(1); },false);
该方法移除时，所有参数必须相同：
btn.addEventListener('click',fn1,false); function fn1(){ console.log(1); }; btn.removeEventListener('click',fn1,true); //由于这里移除时第三个参数为true，与上面不同，点击后还是会输出1
阻止事件冒泡:
event.stopPropagation()方法
btn.addEventListener('click',fn1,false); function fn1(ev){ ev.stopPropagation(); };
再重申一遍，没有fn1，直接写匿名函数时，无法解绑。有命名函数，移除操作时，所有参数必须相同。
欢迎关注
,
