【DOM事件】DOM事件类知识巩固_domkeyeventparams-CSDN博客

本文链接：https://blog.csdn.net/webFrontEndDev/article/details/101275751

本文深入解析DOM事件模型，包括事件级别、捕获与冒泡机制、事件流过程及Event对象的应用。介绍了DOM0至DOM3级别的事件处理方式，探讨了自定义事件与模拟事件的实现方法。

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

基本概念：DOM事件的级别 DOM事件模型 DOM事件流 DOM事件捕获的具体流程 Event 对象的常见应用自定义事件

DOM标准定义事件级别：

DOM 0： element.onclick = function (){}

DOM 1：没有制定与事件相关的标准

DOM 2：element.addEventListener('click', function (){}, false) // 参数解释（事件名，响应函数，false: 冒泡阶段触发[默认] true:捕获阶段触发）

DOM 3：element.addEventListener('keyup', function (){}, false) 增加（鼠标）事件类型

事件模型：

捕获：从上到下

冒泡：从下到上

事件流：

一个完整的事件流分为三个阶段：1、捕获 2、目标阶段：事件从捕获到达目标元素 3、冒泡：从目标元素上传到window对象

DOM事件捕获的具体流程：

JS获取html 元素的方法：document.documentElement

JS获取body 元素的方法：document.body

冒泡的具体流程：与捕获的流程相反，从目标元素逐层传递到window

Event 对象的常见应用

event.preventDefault() // 阻止默认事件比如：a标签阻止默认跳转

event.stopPropagation() // 阻止冒泡比如：父子元素事件区分

event.stopImmediatePropagation() // 事件响应优先级 阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。

event.currentTarget // 当前绑定的事件对象（事件委托中的父元素）

event.target // 事件代理/委托当前被点击的发生 IE使用srcElement

自定义事件、模拟事件

1、new Event('事件名')

var eve = new Event('custom'); // 声明自定义事件

dom.addEventListener('custom', function (){ ... }); //

dom.dispatchEvent(eve); // 自定义触发事件，注意此处参数是触发的事件对象，不是事件名

2、new CustomEvent('事件名', params); //可以传递参数

    var param = {
      detail:{id: 5}
    }
    var eve = new CustomEvent('test', param);
    ev.addEventListener('test', function (e){
      console.log(e)
      console.log(e.detail)
    });
    setTimeout(function (){
      ev.dispatchEvent(eve);
    }, 1000)