标签：oul 捕获 元素 break 事件 冒泡

事件捕获、事件冒泡

addEventListener：向指定元素添加事件句柄。（第三个参数默认false冒泡阶段，true为捕获阶段）

onclick：事件会在元素被点击时发生。（发生在冒泡阶段）

一次点击事件流程如下图

注意：

• 目标元素不区分捕获阶段和冒泡阶段，按注册顺序执行。
• 事件执行顺序 与视觉位置无关， 只与真实dom层级有关（例如用z-index把子元素放在父元素之下， 错位漏出子元素，点击子元素，事件捕获 还是父到子，冒泡子到父）

在线demo演示

事件委托

对“事件处理程序过多”问题的解决方案就是事件委托.

事件委托利用了事件冒泡, 只指定一个事件处理程序，就可以管理某一类型的所有事件.

优点

1. 减少事件注册，节省内存
2. 简化了dom更新对应的事件更新

<ul id="oul">
  <li id="a">aaaaa</li>
  <li id="b">bbbbb</li>
  <li id="c">ccccc</li>
</ul>

var oul = document.getElementById('oul');
oul.onclick = function (e) {
  switch (e.target.id) {
    case 'a':
      alert('This is a');
      break;
    case 'b':
      alert('This is b');
      break;
    case 'c':
      alert('This is c');
      break;
  }
}

阻止事件

阻止捕获和冒泡阶段中当前事件的进一步传播。

event.stopPropagation();

阻止默认事件。

event.preventDefault();

whosmeya.com

标签：oul,捕获,元素,break,事件,冒泡
来源： https://www.cnblogs.com/whosmeya/p/12979650.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。