web前端之 DOM事件类

爱被打了一巴掌 2023-05-29 06:53 27阅读 0赞

### DOM事件类 ###

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

# 基本概念：DOM事件的级别 #

DOM0：element.onclick = function()\{\}  
DOM2：element.addEventListener(‘click’,function()\{\},false)  
DOM3：element.addEventListener(‘keyup’,function()\{\},false)  
注：DOM1中没有关于DOM事件的相关内容  
DOM3中新增了DOM事件和自定义事件

# DOM事件模型 #

捕获（从上到下）  
冒泡（从下到上）  
详解见DOM事件流以及具体流程

# DOM事件流 #

DOM事件流是指浏览器与用户交互过程中发生的三个阶段，通过**捕获**到达**目标事件**，再通过**冒泡回传**

# 描述DOM事件捕获的具体流程 #

**捕获阶段**（从上到下）：  
window→document→html（documentElement是html的外层节点）→body→…→目标元素  
**目标阶段**事件在目标节点上发生  
**冒泡阶段**（从下到上）  
目标元素→…→body→html→document→window  
代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]  
结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]

# Event对象的常见应用 #

event对象是指用来获取事件的相关信息，比如点击事件弹出弹框等  
event.preventDefault() 取消事件的默认作用  
event.stopPropagation() 取消事件冒泡  
event.stopImmediatePropagation() 阻止事件冒泡和元素上其他相同事件  
event.currentTarget 事件绑定的元素  
event.target 引起事件触发的元素  
注意：event.currentTarget与event.target的区别  
参考如下理解：https://blog.csdn.net/jiang7701037/article/details/81481263

# 自定义事件 #

两种用法，如代码中所示：  
1、Event，不带参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]  
2、CustomEvent，带参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105161019367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191105161048456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191105160843577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191105160931855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70