事件的三个阶段:捕获阶段 目标阶段 冒泡阶段

js有好多的知识需要不断积累,但是不能浅尝,应该深究其内因,并运用在日常开发过程中。

  1. 捕获阶段:

    事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标节点。

    那么捕获阶段有什么用吗?完全可以没有捕获阶段也可以啊?

    捕获阶段的主要任务是建立传播路经,在冒泡阶段根据这个路经回溯到文档根节点

  2. 目标阶段
    事件到达目标节点时,就到了目标阶段,事件在目标节点上被触发

  3. 冒泡阶段
    事件在目标节点上触发后,不会终止,一层层向上冒,回溯到根节点。

  4. 运用举例:

    html代码

      <div class="a">
          <li class="b">
            <a href="#" class="c">buhuo</a>
          </li>
        </div>

    js代码

    var div = document.getElementsByClassName('a')[0];    //注意[0]
    var li = document.getElementsByClassName('b')[0];
    var a = document.getElementsByClassName('c')[0];
    
    
    //第三个参数默认是false,
    //是对事件冒泡过程添加函数进行处理
    div.addEventListener('click',function(event){ 
      console.log('div');
    });
    li.addEventListener('click',function(event){ 
      console.log('li');
    });
    a.addEventListener('click',function(event){ 
      console.log('a');
    });
    
    
    //事件捕获过程处理
    //第三个参数设为true
    div.addEventListener('click',function(event){ 
      console.log('div');
    },true);
    li.addEventListener('click',function(event){ 
      console.log('li');
    },true);
    a.addEventListener('click',function(event){ 
      console.log('a');
    },true);
    
    

    运行结果
    div
    li
    a
    a
    li
    div

    可知:首先是捕获阶段执行,再是冒泡阶段

  5. 运用在事件委托上
    JavaScript事件代理可以把事件处理器添加到一个父元素上,这样就避免了把事件处理器添加到多个子元素上。

  6. 阻止事件冒泡

    某个DOM节点绑定了某事件监听器,本来是想当该DOM节点触发事件,才会执行回调函数。结果是该节点的某后代节点触发某事件,由于事件冒泡,该DOM节点事件也会触发,执行了回调函数,这样就违背了最初的本意了。

    html

    <!-- 阻止事件冒泡 -->
        <li class="aa">
          <a href="#" class="bb">阻止事件冒泡</a>
          <a href="#" class="cc">cc</a>
        </li>

    js

    var li1 = document.getElementsByClassName('aa')[0];
    li1.addEventListener('click',function(event){
      if(event.target.tagName.toLowerCase() === 'li'){
        console.log(event.target);
      }
      console.log(event.currentTarget);  //监听节点
    })
    for(var i=0;i<li1.children.length;i++){
      li1.children[i].addEventListener('click',function(event){
        event.stopPropagation();  //在子元素上阻止冒泡
      })
    }

    结果
    点击a标签时,没有任何反应,当点击li标签时,会输出对象

    注意:
    无法在捕获阶段阻止事件冒泡
    所以当上述代码加上true后,达不到效果

    原文作者:晟沚
    原文地址: https://blog.csdn.net/zhuzhupozhuzhuxia/article/details/70339289
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞