事件流：事件冒泡，事件捕获，html事件处理，以及DOM0级事件处理程序，和DOM2级事件处理程序

本文链接：https://blog.youkuaiyun.com/qq_41979219/article/details/79900705

本文深入探讨了网页中事件处理的不同方式，包括HTML事件处理、DOM0级事件处理及DOM2级事件处理。详细介绍了事件流的概念，即事件冒泡与事件捕获的过程，并通过实例展示了各种事件处理机制的特点和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.事件流：描述的是在页面中接受事件的顺序

2.事件冒泡：

由最具体的元素接收，然后逐级向上传播至最不具体的元素节点

3.事件捕获

最不具体的节点先接收事件，到最具体的节点接收

html事件处理有个很大的缺点：修改一处就要同时修改两处，比如函数名称被修改了，那么在HTML文档中的onclick事件名称也必须要被修改掉，这会比较麻烦可以避免这个问题。就用DOM 0级事件处理。

html事件处理：直接添加到HTML结构中

<!-- <script>
function demo(){
alert("hello 这是html事件处理");//：
}

</script> -->

DOM 0级事件处理程序：把一个函数赋值给一个事件处理程序属性

<button id="btn1">按钮</button>
<script>
var btn1 = document.getElementById('btn1');
btn1.onclick = function (){alert("hello 这是DOM 0级事件处理程序1")};//被覆盖掉
btn1.onclick = null;//清除0级事件处理程序
//DOM 0级事件处理程序的优势是，只需在alert里改动一处就可以了，和HTML文档没关系了
//btn1.onclick = function (){alert("hello 这是DOM 0级事件处理程序2")};
//缺点：多个事件会被覆盖掉，只会显示最后一个事件

</script>

DOM2级事件处理程序：语法：addEventListener(“事件名”,“事件处理函数”,“布尔值”);true:事件捕获；false:事件冒泡
<button id="btn1">按钮</button>
<script>
document.getElementById("btn1");
addEventListener("click",demo1);
addEventListener("click",demo2);
addEventListener("click",demo3);
function demo1(){alert("这是DOM2级事件处理程序1")}
function demo2(){alert("这是DOM2级事件处理程序2")}
function demo3(){alert("这是DOM2级事件处理程序3")}
//依次执行，不会被覆盖
removeEventListener("click",demo2);//要移除哪个事件，就放入哪个事件的监听参数

</script>