DOM事件总结

原创已于 2023-04-08 21:39:14 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-03-14 22:26:53 首次发布

DOM事件模型包括捕获和冒泡两个阶段，事件从window对象开始，向下传递至目标元素，然后回溯到window。event.preventDefault()用于阻止默认行为，如阻止链接跳转；event.stopPropagation()则阻止事件冒泡。event.currentTarget和event.target在事件委托中分别指代父元素和子元素。文章还介绍了DOM事件的级别，包括DOM0、DOM2和DOM3的事件处理方式。

基本概念

DOM事件模型

DOM事件模型就是 捕获和冒泡

捕获：从上往下。
冒泡：从下（目标元素）往上。

DOM事件流

指的是事件传递的三个阶段。就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。

捕获：从 window 对象传到目标元素。
目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
冒泡：从目标元素传到 Window 对象。

DOM事件捕获的具体流程

捕获阶段，事件依次传递的顺序是：window --> document --> html–> body --> 父元素、子元素、目标元素。

冒泡的流程

与捕获的流程相反

Event对象的常见方法

阻止默认行为

event.preventDefault();

比如，已知 <a>标签绑定了click事件，此时，如果给<a>设置了这个方法，就阻止了链接的默认跳转。

阻止冒泡

event.stopPropagation();

例如：单击子元素时，子元素和父元素都会做相应处理。这个时候，就要用到阻止冒泡了。

两个重要属性（事件委托中用到）

event.currentTarget   //当前所绑定的事件对象。在事件委托中，指的是【父元素】。

event.target  //当前被点击的元素。在事件委托中，指的是【子元素】。

自定义事件

var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
    console.log('clickTest');
});

//元素注册事件
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest

DOM事件的级别

DOM事件的级别，准确来说，是DOM标准定义的级别。包括：

DOM0的写法：

element.onclick = function () {
	//事件处理 ···
}

DOM2的写法：

element.addEventListener('click', function () {
	//事件处理 ···
}, false);

上面的第三参数中，true表示事件在捕获阶段触发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。

DOM3的写法：

element.addEventListener('keyup', function () {
	//事件处理 ···
}, false);

DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。