javascript中的事件流

js的事件流分为三个阶段:捕获、目标、冒泡。

js中的事件绑定一般都会选择DOM2级提供的方法来绑定事件,当然也可以使用DOM0级类似onclick方法来绑定事件,但是DOM0级绑定事件一个对象只能绑定一个事件,而DOM2级提供的事件监听addEventListener可以同一个元素绑定多个事件。这也是两者之间的区别。

element.addEventListener(event,function,useCapture)

event:表示绑定的事件。

function:表示事件所要执行的方法。

useCapture:表示事件执行在什么阶段;默认值为false,即冒泡阶段。省略不写,就是代表该事件处于冒泡阶段。

那么到底什么是冒泡呢?下面通过一张图来理解什么是冒泡,什么是捕获。event

首先,需要知道,事件流指的是页面中事件接收的顺序。在浏览器里(这里建议结合上图,然后按着我的思路来脑补事件流机制),当我们触发一个事件的时候,例如在div里绑定了一个click事件,当点击div的时候,浏览器默认也点击了body,点击了body,浏览器会默认为也点击了html,最后也点击了document。

假设在body上也绑定了click事件,当点击div触发click事件的同时也会触发body上的click事件,如果html上也绑定了click事件,也会被触发,而这种事件流的机制就被称作为事件冒泡。

事件冒泡的定义:事件由最具体的元素 接受,然后逐级先上传播至最不具体的元素。

事件委托也正是利用这种机制,可以把子元素所要触发的事件绑定到父元素上,当点击子元素时,也会触发父元素上所绑定的事件。关于事件委托可以查看我写的一篇《javascript中的事件委托》。

事件捕获的定义:事件由最不具体的元素开始接收事件,然后逐级向下至最具体的元素接收事件,也就是说事件捕获与事件冒泡是相反的。

图文不好理解,在来看一段代码:

<div id="warp">
    <ul>
      <li>a</li>
      <li>b</li>
      <li id="list-item">c
      <span>d</span>
      </li>
      </ul>
</div>
<script>
document.getElementById("warp").addEventListener("click",function(){console.log("1")},false);
document.getElementById("list-item").addEventListener("click",function(){console.log("2")},false);
document.getElementsByTagName("span")[0].addEventListener("click",function(){console.log("3")},false);
</script>

从上面的demo中可以看出,分别为div父容器,id为list-item的li标签和span标签绑定了三个点击事件,都处在冒泡阶段。当点击span便签时,console.log出来的结果是 3、2 、1,当点击id为list-item的li标签时,打印出来的是2 、1,当点击li时,打印出的是1。

<script> 
document.getElementById("warp").addEventListener("click",function(){console.log("1")},true); 
document.getElementById("list-item").addEventListener("click",function(){console.log("2")},true);
document.getElementsByTagName("span")[0].addEventListener("click",function(){console.log("3")},true); 
</script>

把事件冒泡改为事件捕获时,点击span便签时,console.log出来的结果是 1、2 、3,点击id为list-item的li标签时,打印出来的是1、2,点击li时,打印出的是1。

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫