DOM事件

1、事件级别

• DOM0：element.onclick = function(){}
• DOM2：element.addEventListener(‘click’, function(){}, false)
• DOM3：element.addEventListener(‘keyup’, function(){}, false)

注意：没有 DOM1是因为标准制定的时候没有涉及 DOM事件，据《JavaScript高级程序设计》DOM1主要是HTML和XML文档的底层结构。DOM3 是 DOM2 的补充。

2、捕获和冒泡

捕获的流程由外到内：window -> document -> html -> body -> … -> 目标元素。

冒泡的流程由内到外：目标元素 -> … -> body -> html -> document -> window。

3、常见方法

1. event.preventDefault()：取消事件的默认动作。
2. event.stopPropagation()：阻止事件冒泡，不再传播。
3. event.stopImmediatePropagation()：阻止监听同一事件的其他事件监听器被调用。如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。

4、示例

// event.preventDefault()
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
    document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
    // 多选框将无法选中
    event.preventDefault();
}, false);

// event.stopImmediatePropagation()
const p = document.querySelector('p')
p.addEventListener("click", (event) => {
    alert("我是p元素上被绑定的第一个监听函数");
}, false);
p.addEventListener("click", (event) => {
alert("我是p元素上被绑定的第二个监听函数");
    event.stopImmediatePropagation();
    // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
p.addEventListener("click",(event) => {
    alert("我是p元素上被绑定的第三个监听函数");
    // 该监听函数排在上个函数后面，该函数不会被执行
}, false);
document.querySelector("div").addEventListener("click", (event) => {
    alert("我是div元素,我是p元素的上层元素");
    // p元素的click事件没有向上冒泡，该函数不会被执行
}, false);

5、参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation