事件冒泡、事件捕获、事件委托

作者: puxiaotaoc | 来源:发表于2018-08-17 13:12 被阅读17次

一、DOM事件流

DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡和事件捕获都是描述事件触发时序问题的术语；
事件捕获（event capturing）：当鼠标点击或触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应事件的话，会先触发父元素绑定的事件，是自上而下的；
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行传播，直到根节点，是自下而上的；
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一根引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆；
DOM事件流
三个阶段:1-5捕获过程、5-6目标过程、6-10冒泡过程
二、事件绑定方法：addEventListener、attachEvent
addEventListener

document.getElementById("child").addEventListener("click", function(e) {
      console.log("child事件被触发，" + this.id)
 },true)

attachEvent

element.attachEvent('onclick', function(){
        // ...
});

三、事件冒泡

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true为事件捕获，false为事件冒泡，默认为false即事件冒泡，JQuery的e.stopPropagation会阻止冒泡，意思是到我为止，我的上一级的事件就不要触发了；

// 事件冒泡
<body>
  <div id="parent">
    <div id="child" class="child">child</div>
  </div>
  <script type="text/javascript">
    document.getElementById("parent").addEventListener("click", function(e) {
      console.log("parent事件被触发，" + this.id);
    })
    document.getElementById("child").addEventListener("click", function(e) {
      console.log("child事件被触发，" + this.id)
    })
    // child事件被触发，child
    // parent事件被触发，parent
  </script>
</body>

二、事件捕获

// 事件捕获
<body>
  <div id="parent">
    <div id="child" class="child">child</div>
  </div>
  <script type="text/javascript">
    document.getElementById("parent").addEventListener("click", function(e) {
      console.log("parent事件被触发，" + this.id);
    },true)
    document.getElementById("child").addEventListener("click", function(e) {
      console.log("child事件被触发，" + this.id)
    },true)
    // parent事件被触发，parent
    // child事件被触发，child
  </script>
</body>

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #parent {
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 3;
      background: green;
    }

    #child {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      background: orange;
    }
  </style>
</head>

<body>
  <div id="parent">
    父元素
    <div id="child">
      子元素
    </div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    document.body.addEventListener("click", function(e) {
      console.log("click-body");
    }, false);

    parent.addEventListener("click", function(e) {
      console.log("click-parent");
    }, false);

    //新增事件捕获事件代码
    parent.addEventListener("click", function(e) {
      console.log("click-parent--事件捕获");
    }, true);

    child.addEventListener("click", function(e) {
      console.log("click-child");
      // e.stopPropagation(); // 停止事件传播
    }, false);
  </script>
</body>
</html>

事件冒泡和事件捕获

<style type="text/css">
    #wrapDiv, #innerP, #textSpan{
        margin: 5px;padding: 5px;box-sizing: border-box;cursor: default;
    }
    #wrapDiv{
        width: 300px;height: 300px;border: indianred 3px solid;
    }
    #innerP{
        width: 200px;height: 200px;border: hotpink 3px solid;
    }
    #textSpan{
        display: block;width: 100px;height: 100px;border: orange 3px solid;
    }
    </style>
</head>
<body>
     <div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>
    <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>
</body>

target和currentTarget都是event上面的属性，target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个DOM元素上；目标阶段也就是 target == currentTarget的时候，由于window没有nodeName这个属性，所以是undefined；
在目标元素上不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生；

事件冒泡和事件捕获案例2

五、事件委托

var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    parent.onclick = function(e) {
      if (e.target.id == "child") {
        console.log("您点击了child元素")
      }
      if (e.target.id == "parent") {
        console.log("您点击了parent元素")
      }
    }

六、事件绑定的方法

直接获取元素绑定：

element.onclick = function(e){
        // ...
};

优点：简单和稳定，可以确保它在你使用的不同浏览器中运作一致；处理事件时，this关键字引用的是当前元素，这很有帮组;
缺点：只会在事件冒泡中运行；一个元素一次只能绑定一个事件处理函数，新绑定的事件处理函数会覆盖旧的事件处理函数；事件对象参数(e)仅非IE浏览器可用;

直接在元素里面使用事件属性：
W3C方法：

element.addEventListener('click', function(e){
        // ...
}, false);

优点：该方法同时支持事件处理的捕获和冒泡阶段；事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)；在事件处理函数内部，this关键字引用当前元素；事件对象总是可以通过处理函数的第一个参数(e)捕获；可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件;
缺点：IE不支持，你必须使用IE的attachEvent函数替代;

IE下的方法：

element.attachEvent('onclick', function(){
        // ...
});

优点：可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件;
缺点：IE仅支持事件捕获的冒泡阶段；事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）；事件对象仅存在与window.event参数中；事件必须以ontype的形式命名，比如，onclick而非click；仅IE可用，你必须在非IE浏览器中使用W3C的addEventListener；
注意：不是意味这低版本的ie没有事件捕获，它也是先发生事件捕获，再发生事件冒泡，只不过这个过程无法通过程序控制；
七、解除事件

element.removeEventListener('click', function(e){
        // ...
}, false);

IE:

element.detachEvent('onclick', function(){
        // ...
});

八、阻止事件
在支持addEventListener()的浏览器中，可以调用事件对象的stopPropagation()方法以阻止事件的继续传播，如果在同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用，不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播；
IE9之前的IE不支持stopPropagation()方法，而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播；
九、阻止事件的默认行为
e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为；
IE9之前的IE中，可以通过设置事件对象的returnValue属性为false达到同样的效果；

function cancelHandler(event){
    var event=event||window.event;//兼容IE
    
    //取消事件相关的默认行为
    if(event.preventDefault)    //标准技术
        event.preventDefault();
    if(event.returnValue)    //兼容IE9之前的IE
        event.returnValue=false;
    return false;    //用于处理使用对象属性注册的处理程序
}

事件冒泡、事件捕获、事件委托

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端面试基础必备