新手帮助当前位置:鸿宇娱乐 > 新手帮助 > >

js事件冒泡与事件捕获详解

  

[js,冒泡,捕获,事件冒泡,事件捕获]js事件冒泡与事件捕获详解

  

(一)事件绑定  

  

1.普通事件绑定  

  

给html添加一个以on开头的特定的属性(如onclick,onfocus);  

  

  

  
  
    function handler(btn){  alert(this.id); //undefined this指向window对象  alert(btn.id); //A  }  
  
  
  
    var btn = document.getElementById("A");  btn.onclick = function(){  alert("1:"+this.id);  }  btn.onclick = function(){  alert("2:"+this.id);  }  //只能绑定一个事件处理函数,后面的会覆盖前面的;  
  
  

2.符合W3C标准的事件绑定(addEventListener和removeEventListener)  

  

target.addEventListener(type, 鸿宇娱乐 listener[, useCapture]);  

  

type:必须,表示监听事件类型的字符串;  

  

listener:必须,当所监听的事件类型触发时,会接收到一个事件通知对象;listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数;  

  

useCapture:可选,Boolean,默认为false,表示事件传播方式为事件冒泡;true,表示事件传播方式为事件捕获;  

  

(事件捕获与事件冒泡下面有讲到)  

  

这两个函数Firefox和Chrome都支持,IE9及以后也支持这两个函数;IE使用attachEvent/detachEvent来进行事件绑定和取消;  

  
  
    var btn = document.getElementById("B");  btn.addEventListener("click",handler,false);  function handler(){  alert(this.id); //B this指向的是dom对象; attachEvent指向的是window对象  }  
  
  
  
    var btn = document.getElementById("B");  btn.addEventListener("click",handler,true);  btn.addEventListener("click",handler,false);  function handler(){  alert(this.id); //B  }  //当点击按钮时,函数handler会执行2次,一次为事件捕获,一次为事件冒泡;  //如果绑定的是同一个事件处理函数,且都是事件捕获或都是事件冒泡,那么只能绑定一次;  
  
  

3.IE浏览器使用attachEvent/detachEvent进行事件绑定与取消  

  
  
    var btn = document.getElementById("C");  btn.attachEvent("click",handler);  function handler(){  alert(this.id); //undifined this指向的是window对象; addEventListener指向的是dom对象  }  
  
  

注:同一个事件处理函数只能绑定一次;不同的函数对象可以重复绑定不会覆盖;匿名函数和匿名函数即使代码完全一样,也是互相不相同的;  

  

(二)事件捕获与事件冒泡  

  
  
  
  
  
  
  
  
  

事件捕获:就是从最外层到目标对象的顺序触发(如上面的代码,如果点击C,它的触发顺序为A→B→C)  

  

事件冒泡:就是从目标对象到外层的顺序触发(如果点击C,它的触发顺序为C→B→A)  

  

DOM事件流:就是支持两种事件模型,捕获型事件和冒泡型事件,捕获型事件先发生;两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  

  

图片来自网络:  

  

  

  
  
  
  
  
  
  
  var A = document.getElementById("A");  var B = document.getElementById("B");  var C = document.getElementById("C");  // 目标(目标阶段的处理函数,先注册先执行)  C.addEventListener('click',function(){alert("Ct");},true);  C.addEventListener('click',function(){alert("Cf");},false);  // 事件冒泡  A.addEventListener('click',function(){alert("Af");},false);  B.addEventListener('click',function(){alert("Bf");},false);  // 事件捕获  A.addEventListener('click',function(){alert("At");},true);  B.addEventListener('click',function(){alert("Bt");},true);  //当点击C时(蓝色),输出At Bt Ct Cf Bf Af
  
  

阻止事件的传播:  

  

? 在W3c中,使用stopPropagation()方法  

  

? 在IE下设置cancelBubble = true;  

  

阻止事件的默认行为:  

  

? 在W3c中,使用preventDefault()方法;  

  

? 在IE下设置window.event.returnValue = false;  

  

  

(责任编辑:admin)

上一篇:鸿宇娱乐平台:利用jQuery实现可输入搜索文字的

下一篇:棋牌游戏市场百花争鸣,细数立足众多开发商之

推荐内容

客户服务热线

010-400-12345

在线客服