tofacebook.com -专业IT技术社区 JS事件执行顺序理解以及 e.stopPropagation() Web程序【tofacebook.com】 - tofacebook.com-专业IT技术社区
148°

JS事件执行顺序理解以及 e.stopPropagation() Web程序【tofacebook.com】

标签:type   过程   OLE   ati   sele   nodename   class   alt   libs   

先捕获(document-往下)->后执行(执行)->冒泡(具体到不具体);

addEventListener 第三个参数 默认false   (false 是冒泡阶段执行)   true 是捕获阶段执行  

如果是多个元素嵌套的情况,如果为true  就先找为true的执行  先找true里的大的,再到小的   然后在到具体的,也就是实际点击的.  然后再冒泡(小到大)

 

网上找到一张图  

技术分享图片

 

来一段小代码  增强一下记忆:

    <div class="div">

            <p class="box">

            </p>

        </div>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var get = document.querySelector.bind(document);
            var log = console.log.bind(this)

            get(‘p‘).addEventListener(‘click‘, function(e) {
                log(e.eventPhase)
                alert(‘p‘)
            }, false)

            get(‘body‘).addEventListener(‘click‘, function(e) {

                log(e.eventPhase)

                alert(‘body‘)

                if(e.target.nodeName == ‘DIV‘ || e.target.nodeName == ‘P‘) {

                    //如果点击的是div  那么 

                    e.stopPropagation()

                }

                //true  是捕获阶段获取  
            }, false)

            get(‘div‘).addEventListener(‘click‘, function(e) {

                alert(‘div‘)

                //true  是捕获阶段获取  
            }, true)
        </script>

 

顺便 聊聊  e.stopPropagation();

 

最早知道e.stopPropagation()的时候只知道是阻止冒泡,自己也一直死记硬背的用着,具体什么原理,一直没搞清楚.

今天学习了相关文档,说是阻止冒泡并不错,但是不全面.   

按官方说法 stopPropagation()是不再派发事件。

  终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

  该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

  看来stopPropagation()是任何阶段都可以调用并且生效的.   那是不是可以理解为,如果给body加事件捕获  然后 再阻止派发事件,那么就可以做掉页面上的其他点击事件了?   确实是的!  用在点击页面任意位置关闭某个弹窗还是不错的.  也可以某种权限验证时来简单限制.

测试代码如下:

        
            get(‘body‘).addEventListener(‘click‘, function(e) {

                

            e.stopPropagation()
            
            alert(2)

            }, true)

 

JS事件执行顺序理解以及 e.stopPropagation()

标签:type   过程   OLE   ati   sele   nodename   class   alt   libs   

原文地址:https://www.cnblogs.com/simao/p/9898225.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: