DOM事件模型

DOM事件模型是用于描述浏览器中事件传播机制的概念。DOM事件模型分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

在事件传播过程中，事件会从文档根节点开始，逐层向下传播到目标元素，然后再逐层向上冒泡回文档根节点。

捕获阶段

在事件传播的捕获阶段，事件从文档根节点开始，逐层向下传播到目标元素的父元素。

在这个过程中，如果父元素有注册捕获事件处理程序，浏览器会依次调用这些处理程序。

目标阶段

在事件传播到目标元素时，浏览器会调用目标元素上注册的事件处理程序。如果目标元素没有注册事件处理程序，事件会直接跳过目标阶段。

冒泡阶段

在事件传播的冒泡阶段，事件会从目标元素开始，逐层向上冒泡回文档根节点。

在这个过程中，如果祖先元素有注册冒泡事件处理程序，浏览器会依次调用这些处理程序。

注册事件处理程序

使用addEventListener方法可以注册多个事件处理程序，并且可以指定事件的捕获和冒泡阶段。

element.addEventListener(event, function, useCapture);

当useCapture为false时，表示事件处理程序在冒泡阶段被调用，也就是事件从目标元素开始向上冒泡的过程中被调用，这是默认值。

当useCapture为true时，表示事件处理程序在捕获阶段被调用，也就是事件从文档根节点开始向下传播的过程中被调用。

阻止事件传播

event.stopPropagation()是DOM中的一个方法，用于阻止事件的进一步传播，即停止事件在DOM树中的冒泡或捕获过程。

有时候，我们希望在触发某个元素的事件后，该事件不再向上冒泡，此时可以使用event.stopPropagation()方法来停止事件的传播。

const button = document.querySelector('button'); 
button.addEventListener('click', function(event) {
    event.stopPropagation(); 
    console.log('Button clicked'); 
});

如果要完全阻止事件的执行，可以使用event.preventDefault()方法，该方法用于阻止事件的默认行为，比如阻止表单提交、阻止链接跳转等。