JavaScript addEventListener()事件监听-事件流执行顺序

addEventListener()事件监听-事件流执行顺序

事件冒泡或事件捕获?
HTML DOM中有两种事件传播方式,即冒泡和捕获。
事件传播是一种在事件发生时定义元素顺序的方法。

如果<div>元素中有<p>元素,并且用户单击<p>元素,应该首先处理哪个元素的“click”事件?

在冒泡中,首先处理内部元素的事件,然后处理外部:

首先处理<p>元素的click事件,然后处理<div>元素的click事件。

在捕获最外层元素时,首先处理事件然后处理内部:

首先处理<div>元素的click事件,然后处理<p>元素的click事件。

使用addEventListener()方法,您可以使用“useCapture”参数指定传播类型:
默认值为false,将使用冒泡传播,当值设置为true时,事件使用捕获传播。
事件先捕获-》处于事件阶段-》冒泡阶段

<body>
  <div>
    <p id="parEle">我是父元素    <span id="sonEle">我是子元素</span></p>
</div>
</body>
<script type="text/javascript">
 var sonEle = document.getElementById('sonEle');
  var parEle = document.getElementById('parEle');
  
  parEle.addEventListener('click', function () {
      alert('父级 冒泡');
  }, false);
  parEle.addEventListener('click', function () {
      alert('父级 捕获');
  }, true);

  sonEle.addEventListener('click', function () {
      alert('子级冒泡');
  }, false);
  // 当点击子级点击事件的时候,是按照父级捕获-》子级冒泡-》子级捕获-》子级父级冒泡的顺序执行的;
  // 原因是因为当事件处于目标阶段时,事件调用顺序决定于绑定事件的书写顺序,按上面的例子为,先调用冒泡阶段的事件处理程序,再调用捕获阶段的事件处理程序。依次alert出“子集冒泡”,“子集捕获”。
  sonEle.addEventListener('click', function () {
      alert('子级捕获');
  }, true);
  </script>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页