事件流,事件捕获与事件冒泡-基础知识总结------彭记(018)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件流,事件捕获与事件冒泡-基础知识总结------彭记(018)相关的知识,希望对你有一定的参考价值。

事件流:

-事件流包括三个阶段-事件捕获阶段、处于目标阶段和事件冒泡阶段。

-首先发生的是事件捕获,为截获事件提供了机会,然后是实际的目标接收到事件,最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。

事件冒泡

-事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="myDiv">Click Me</div>
</body>
</html>

-如果你单击了页面中的<div>元素,那么这个click事件会安装如下顺序传播:

1,<div>

2,<body>

3,<html>

4,document

-也就是说,click事件首先在<div>元素上发生,而这个元素就是我们单击的元素,然后,click事件沿DOM树想上传播,在每一级节点上都会发生,直至传播到document对象

-所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别,IE5.5及更早版本中的事件冒泡会跳过<html>元素(从<body>直接跳到document),IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

事件冒泡带来的影响:
       -假如前代元素和后代元素都绑定了同类型的事件,当后代元素触发的时候,同时会冒泡到前代元素上,此时,两个完全不同的功能有一个元素触发 -- 不对劲
     
 -解决方式:阻止事件冒泡
 -事件对象  --  谷歌和火狐支持 --- ie8不支持
 event.stopPropagation();
   
 -谷歌,ie的方法:
  window.event.cancelBubble = true;

事件捕获:

是不太具体的元素应该更早接受到事件,而最具体的节点应该最后接收到事件。他们的用意是在事件到达目标之前就捕获它;也就是跟冒泡的过程正好相反,以html的click事件为例,document对象(DOM级规范要求从document开始传播,但是现在的浏览器是从window对象开始的)最先接收到click事件的然后事件沿着DOM树依次向下传播,一直传播到事件的实际目标

以上是关于事件流,事件捕获与事件冒泡-基础知识总结------彭记(018)的主要内容,如果未能解决你的问题,请参考以下文章

事件流 ---- 事件冒泡与事件捕获

聊聊事件冒泡与事件捕获

JavaScript事件捕获冒泡与捕获

js零散知识点总结

js事件相关知识点总结

JavaScript事件冒泡和事件捕获