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
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页