JS（六）——事件监听

事件监听

对某些事件进行监听，这样只要在指定的元素上触发了该事件，就会执行一个回调函数来执行相关的操作。

w3c规范：

语法：

element.addEventListener(event, function, useCapture) //IE6~8不支持

element.attachEvent('on' + event, function) //支持IE6~10，IE11不支持

element['on' + event] = function(){} //支持所有浏览器

event( 必需）事件名，支持所有Dom事件。

function(必需) 指定事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

例1：

function cb(){
  console.log(1);  
}

element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

例2：当一个对象使用.onclick的写法触发多个方法的时候。后一个方法会把前一个方法覆盖掉。也就是说当对象的onClick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。

window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.onclick = function(){ 
  alert("第一个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第二个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第三个事件"); 
 } 
}

最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。

例3：事件绑定函数addEventListener

var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 //addEventListener：绑定函数 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
}

输出：第一个监听事件和第二个监听事件

例4：采用事件监听给对象绑定方法后，可以解除相应的绑定

var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
 btn.removeEventListener("click",eventOne); 
}

输出：第二个监听事件

解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。

错误写法：

btn.addEventListener("click",function(){ 
 alert(11); 
}); 
btn.removeEventListener("click",function(){ 
 alert(11); 
});

正确写法：

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

JS（六）——事件监听

事件监听

猜你喜欢