JavaScript事宜代办和托付

2019年8月26日 69次阅读 来源: 点不着蚊香

在JavaScript中，常常会遇到要监听列表中多项li的情况，假定我们有一个列表以下：


<ul id="list">
  <li id="item1">item1</li>
  <li id="item2">item2</li>
  <li id="item3">item3</li>
  <li id="item4">item4</li>
</ul>

如果我们要完成以下功用：当鼠标点击某一li时，alert输出该li的内容，我们一般的写法是如许的：

  • 当列表项比较少时，直接给每一个li增加onclick事宜
  • 列表项比较多时，在onload时就给每一个列表项挪用监听

第一种方法比较简单直接，然则没有顾及到html与JavaScript的星散，不发起运用，第二种方法的代码以下：


window.onload=function(){
  var ulNode=document.getElementById("list");
  var liNodes=ulNode.childNodes||ulNode.children;
  for(var i=0;i<liNodes.length;i++){
    liNodes[i].addEventListener('click',function(e){
      alert(e.target.innerHTML);
    },false);
  }
}

由上能够看出来，如果不断的删除或增加li，则function（）也要不断的变动操纵，易失足，因而引荐运用事宜代办，在运用事宜代办之前，我们先来相识一下事宜阶段(event phase)：

事宜阶段：

当一个DOM事宜被触发的时刻，他并不是只在它的劈头对象上触发一次，而是会阅历三个差别的阶段。简而言之：事宜一开始从文档的根节点流向目的对象(捕捉阶段)，然后在目的对向上被触发(目的阶段)，以后再回溯到文档的根节点(冒泡阶段)如图所示（图片来自W3C）：

《JavaScript事宜代办和托付》

事宜捕捉阶段(Capture Phase)

事宜的第一个阶段是捕捉阶段。事宜从文档的根节点动身，跟着DOM树的构造向事宜的目的节点流去。途中经由各个条理的DOM节点，并在各节点上触发捕捉事宜，直到抵达时候的目的节点。捕捉阶段的主要任务是简历流传途径，在冒泡阶段，时候会经由过程这个途径回溯到文档根节点。


element.removeEventListener(&ltevent-name>, <callback>, <use-capture>);

我们经由过程上面的这个函数来给节点设置监听，能够经由过程将;设置成true来为事宜的捕捉阶段增加监听回调函数。在现实运用中，我们并没有太多运用捕捉阶段监听的用例，然则经由过程在捕捉阶段对事宜的处置惩罚，我们能够阻挠相似click事宜在某个特定元素上被触发。


var form=document.querySeletor('form');
form.addEventListener('click',function(e){
  e.stopPropagation();
  },true);

如果你对这类用法不是很相识的话，最好照样将设置为false或许undefined，从而在冒泡阶段对事宜举行监听。

目的阶段(Target Phase)

当事宜抵达目的节点时，事宜就进入了目的阶段。事宜在目的节点上被触发，然后逆向回流，晓得流传到最外层的文档节点。

关于多层嵌套的节点，鼠标和指针事宜常常会被定位到最里层的元素上。假定，你在一个div元素上设置了click的监听函数，而用户点击在了这个div元素内部的p元素上，那末p元素就是这个时候的目的元素。事宜冒泡让我们能够在这个div或许更上层的元素上监听click事宜，而且时候流传过程当中触发还调函数。

冒泡阶段(Bubble Phase)

事宜在目的事宜上触发后，并不在这个元素上停止。它会跟着DOM树一层层向上冒泡，直到抵达最外层的根节点。也就是说，统一事宜会一次在目的节点的父节点，父节点的父节点…直到最外层的节点上触发。

绝大多数事宜是会冒泡的，但并不是一切的。详细可见：范例申明

由上我们能够想到，能够运用事宜代办来完成对每一个li的监听。代码以下：


window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener('click',function(e){
       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*推断目的事宜是不是为li*/
         alert(e.target.innerHTML);
       }
     },false);
  
};
    原文作者：点不着蚊香
    原文地址: https://segmentfault.com/a/1190000002613617
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞