JS事件模型-CSDN博客

本文链接：https://blog.csdn.net/qq_39373985/article/details/131906537

文章介绍了JavaScript中的事件模型，包括事件流的三个阶段：捕获阶段、目标阶段和冒泡阶段。DOM0级事件模型是浏览器自有的，支持冒泡但不支持捕获，而DOM2级事件模型提供更标准的方法，支持添加、移除事件监听器，并能选择在捕获或冒泡阶段处理事件。此外，文章还提及了事件对象的`preventDefault()`和`stopPropagation()`方法。

摘要由CSDN通过智能技术生成

JavaScript中的事件模型

一、事件与事件流

事件流都会经历三个阶段：

事件捕获阶段(capture phase)
处于目标阶段(target phase)
事件冒泡阶段(bubbling phase)

二、事件模型

事件模型可以分为三种：

原始事件模型（DOM0级）
标准事件模型（DOM2级）
IE事件模型（基本不用）

DOM0

没有统一标准，是浏览器厂商自己开发实现的，大概实在98年左右，出现第一个规范 DOM1级

绑定`DOM0`事件

HTML代码中直接绑定

<input type="button" onclick="fun()">

var btn = document.getElementById('.btn');
btn.onclick = fun;

特性

绑定速度快
只支持冒泡，不支持捕获
同一个类型的事件只能绑定一次

删除`DOM0`事件

btn.onclick = null;

DOM2

事件绑定

addEventListener(eventType, handler, useCapture);
// 单击事件
obtn.addEventListener("click",function(){
    console.log(123);
},false)

事件移除

removeEventListener(eventType, handler, useCapture)

参数如下：

eventType指定事件类型(不要加on)
handler是事件处理函数
useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false使用冒泡的方式

event事件对象

e.preventDefault()：阻止标签的默认行为
e.stopPropagation()：阻止事件流的传播

参考原文：在JavaScript中的事件模型如何理解?