JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

taowen 发布于2019-08-19 17:39 / 394人阅读

摘要：事件阶段事件分为三个阶段事件捕获事件目标事件冒泡事件捕获和冒泡事件捕获事件发生时首先发生在上，然后依次传递给最后到达目的节点即事件目标。

事件阶段

事件分为三个阶段：事件捕获 --> 事件目标 --> 事件冒泡

事件捕获和冒泡

事件捕获：事件发生时（onclick,onmouseover……）首先发生在document上，然后依次传递给body、……最后到达目的节点（即事件目标）。

事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反

事件

onlick -->事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题

el.onclik = null;   //解绑单击事件，将onlick属性设为null即可

addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖

//事件类型没有on，false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执行一次。
ele.addEventListener("click", function(){ }, false);  
//解绑事件，参数和绑定一样
ele.removeEventListener(event.type, handle, boolean);

attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段

//如果handle是同一个方法，绑定几次执行几次，这点和addEventListener不同,事件类型要加on,例如onclick而不是click
ele.attachEvent("onclick", function(){ }); 
//解绑事件，参数和绑定一样
ele.detachEvent("onclick", function(){ });

默认事件行为：href=""链接，submit表单提交等

return false; 阻止独享属性（通过on这种方式）绑定的事件的默认事件

ele.onclick = function() {
 ……                         //你的代码
 return false;              //通过返回false值阻止默认事件行为
};

event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件

element.addEventListener("click", function(e){
 var event = e || window.event;
 ……
 event.preventDefault( );      //阻止默认事件
},false);

event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件

element.attachEvent("onclick", function(e){
   var event = e || window.event;
   ……
   event.returnValue = false;       //阻止默认事件
});

事件封装

接下来我们把事件绑定以及事件解绑封装成为一个函数，兼容浏览器

// 事件绑定
function addEvent(element, eType, handle, bol) {
 if(element.addEventListener){           //如果支持addEventListener
     element.addEventListener(eType, handle, bol);
 }else if(element.attachEvent){          //如果支持attachEvent
     element.attachEvent("on"+eType, handle);
 }else{                                  //否则使用兼容的onclick绑定
     element["on"+eType] = handle;
 }
}

// 事件解绑
function removeEvent(element, eType, handle, bol) {
 if(element.addEventListener){
     element.removeEventListener(eType, handle, bol);
 }else if(element.attachEvent){
     element.detachEvent("on"+eType, handle);
 }else{
     element["on"+eType] = null;
 }
}

事件冒泡、事件捕获阻止

event.stopPropagation( );    // 阻止事件的进一步传播，包括（冒泡，捕获），无参数
event.cancelBubble = true;   // true 为阻止冒泡

事件委托（事件代理）

事件委托：利用事件冒泡的特性，将里层的事件委托给外层事件，根据event对象的属性进行事件委托，改善性能。

使用事件委托能够避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

来个例子吧，如果要多带带点击table里面的td，普通做法是for循环给每个td绑定事件，td少的话性能什么差别，td如果多了，就不行了，我们使用事件委托:

 

    　　
    　　
    　　
    　　
    　　
    　　
    　　
    　　
    　　
    　　
    table01 table02 table03 table04 table05 table06 table07 table08 table09 table10
    


  // JS
  var out = document.getElementById("out");
  if(out.addEventListener){
      out.addEventListener("click",function(e){
          var e = e||window.event;
          //IE没有e.target，有e.srcElement
          var target = e.target||e.srcElement;
          //判断事件目标是否是td，是的话target即为目标节点td
          if(target.tagName.toLowerCase()=="td"){
              changeStyle(target);
              console.log(target.innerHTML);
          }
      },false);
  }else{
      out.attachEvent("onclick",function(e){
          var e = e||window.event;
          //IE没有e.target，有e.srcElement
          var target = e.target||e.srcElement;
          //判断事件目标是否是td，是的话target即为目标节点td
          if(target.tagName.toLowerCase()=="td"){
              changeStyle(target);
              console.log(target.innerHTML);
          }
      });
  };
};

  function changeStyle(ele){
      ele.innerHTML = "已点击"
      ele.style.background="#900";
      ele.style.color = "#fff"; 
  }

云服务器 GPU云服务器 js事件委托 js阻止冒泡事件什么是js 事件委托委托事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78743.html

js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

SimonMa 2019-08-29 12:33 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

raoyi 2019-08-20 16:25 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

2i18ns 2019-08-01 16:47 评论0 收藏0
JS专题之事件模型

摘要：三事件流规定事件包括三个阶段，事件捕获，处于目标阶段事件冒泡。一起来看添加新增加的，点击发现没有反应，说明事件没有绑定进去，但是我们也并不想，每增加一个新元素，就为这个新元素绑定事件，重复低效率的工作应当避免去做。本文共 1960 字，读完只需 8 分钟事件用户与网页交互是通过事件实现的，事件刚开始是作为分担服务器负载的一个手段，起初没有统一的规范，直到 DOM2 级，网景和 I...

W4n9Hu1 2019-08-26 13:24 评论0 收藏0
JavaScript中几个重要的知识点（2） ---- DOM事件

摘要：使用来移除事件，参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中，绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 事件事件就是文档和浏览器的瞬间交互行为 1.事件类型点击: click 滚轮: scroll 滑动: move 进入: enter 加载: load ...

dantezhao 2019-08-20 17:33 评论0 收藏0