DOM事件-冒泡与捕获

DOM事件-冒泡与捕获

事件执行3个阶段：

• 事件捕获
  • 从根部节点（document对象）一层一层向文档内找，直到找到事件触发的那个节点，这个过程叫事件捕获 。
• 到达目标
  • 找到事件触发的那个节点。
• 事件冒泡
  • 从事件触发的那个节点，一层一层向文档外找，直到根节点（document对象）的过程叫事件冒泡。
  • 事件默认是在冒泡阶段执行。用户体验好，让用户知道自己点的地方是正常的想法。
  • 在冒泡阶段，如果父级节点也注册和用户触发行为一样的事件，这些事件函数会被执行。
  • 父级节点注册了和用户行为一样的事件，用户触发子元素，父级节点也会跟着被触发。
  • 第3个参数默认不写或是false的时候，事件默认在冒泡阶段执行，第3个参数是true，事件是在捕获阶段执行。

阻止事件冒泡

btn.addEventListener("click", function(e) {
    e.stopPropagation();
});

阻止默认事件(行为)

// 鼠标右键事件
document.oncontextmenu = function(e) {
    e.preventDefault();
}