js 事件流

Posted IT刘磊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 事件流相关的知识,希望对你有一定的参考价值。

什么是事件?

事件是文档或浏览器窗口发生的一些特定的交互瞬间, 比如 点击 双击 滚动条滑动……

什么是事件流?

事件流指的是 从页面接收事件的顺序。

关于事件流,IE和Netscape提出了差不多相反的概念,IE提出的就是广为人知的事件冒泡流,而Netscape提出的则是事件捕获流

事件冒泡流: 事件从目标元素(最底层元素)逐级冒泡到最外层元素(windows)

                       事件开始是由最具体的元素接收,然后逐级向上级传播到较为不具体的节点  addEventListener 方法的第三个参数设为 false 表示事件在冒泡阶段触发

       注: 所有现代浏览器都支持事件冒泡

  注: 使用频繁的事件委托 是利用了 事件冒泡   (结构  ul  > li   点击 具体的 li 元素 li 元素会冒泡到 父元素 ul 上 ,同时也会 触发 ul 上的事件  实现了 ul 元素的 事件委托 )

事件捕获流 :  事件从外层元素(windows)逐级捕获到目标元素(最底层元素)

       事件从不太确定的节点接收,然后向下传播到最具体的节点,事件捕获的用意在于 在事件到达预期目标之前捕获它    addEventListener 方法的 第三个参数 设为 true ,表示事件在捕获阶段 触发

        注 : 由于老版本浏览器不支持事件捕获,建议大家更多的是用事件冒泡,在有特殊需要时再使用事件捕获。

 

DOM事件流

事件流应该包括三个阶段,事件捕获阶段  处于目标阶段 事件冒泡阶段

  注 :  当容器元素及嵌套元素,即在捕获阶段又在冒泡阶段调用事件处理程序时:事件按DOM事件流的顺序执行事件处理程序,且当事件处于目标阶段时,事件调用顺序决定于绑定事件的书写顺序

             最底层目标元素的事件调用顺序 和 冒泡,捕获的 书写 顺序有关

 

事件委托的一些 问题 

事件代理同时绑定了li和span,当点击span的时候,li和span都会冒泡。

解决方法1,:

 span的事件处理程序中 阻止 事件冒泡

//  stopPropagation();  阻止 事件冒泡

$(document).on(‘click‘, ‘span‘, function(e){
        alert(‘li span‘);
        e.stopPropagation();
    })

解决方法2 :

li 的事件处理程序中检测 target 元素

//  e.target.nodeName== “ SPAN”

$(document).on(‘click‘, ‘li‘, function (e) {
        if (e.target.nodeName == ‘SPAN‘) {
            e.stopPropagation();
            return;
        }
        alert(‘li li‘);
    });

点击一个列表时,输出对应的索引   事件代理 

<script>
    var ul=document.querySelector(‘ul‘);
    var lis=ul.querySelectorAll(‘ul li‘);
    ul.addEventListener(‘click‘, function (e) {
        var target= e.target;
        if(target.nodeName.toUpperCase()===‘LI‘){
            alert([].indexOf.call(lis,target));
        }
    },false)
</script>

 




以上是关于js 事件流的主要内容,如果未能解决你的问题,请参考以下文章

将 Node.js 流错误事件传播到异步等待样式代码

js阻止浏览器元素的默认事件与js阻止事件冒泡阻止事件流

js学习笔记:事件——事件流事件处理程序事件对象

JS116-JavaScript事件流和事件委托

第三天:JS事件详解-事件流

js 事件