javascript事件监听用法详解

• 绑定多个事件：

  在javascript中，我们有时绑定多个事件。例如我们想要实现对一个按钮绑定多个事件，这时你可能这样写：  

 var  btn1=document.getElmentById('btn');

          btn1.onlick=function(){
{"alert("event1")"}；
          btn1.onlick=function(){
  alert("event2")
}

 

这时如果我们点击该按钮后，会出现什么结果呢？

 

 最后会弹出 event2

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

 

 

为什么会出现这种结果呢，原因很简单。就像我们给变量赋值一样，var v=1； v=2; 最后v的结果是2.类似的，btn1的onlikc事件被覆盖了，因而会弹出event2

 

 

那我们如何实现多个事件的绑定呢？这时候就要用到事件监听器了。

 

• 解除绑定事件

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

 

•   事件监听的捕捉和冒泡

事件监听函数有三个参数：事件 事件触发时执行的函数 是否使用捕获   

例如我们有三个div块

我们给每个div块绑定一个事件  从外到内 div块的 id为 china bg hd

当我们点击最里面的的时候，到底谁先执行呢？这个时候就要用到捕捉和冒泡了

var china=document.getElementById('China');
var bj=document.getElementById('bj');
var hd=document.getElementById('hd');

china.addEventListener('click',function(){alert('捕捉china')},true);
bj.addEventListener('click',function(){alert('捕捉bj')},true);
hd.addEventListener('click',function(){alert('捕捉hd')},true);
//捕捉阶段

此时的执行顺序：捕捉China 捕捉bj 捕捉hd

冒泡阶段：

china.addEventListener('click',function(){alert('mchina')},false);
bj.addEventListener('click',function(){alert('mbj')},false);
hd.addEventListener('click',function(){alert('mhd')},false);

此时的执行顺序则为 ：mhd mhj mChina