DOM事件探秘

Posted 2020-08-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM事件探秘相关的知识，希望对你有一定的参考价值。

说到DOM事件，就不得不说以下几点：

1 事件流

　　事件流：描述的是从页面中接受事件的顺序

　　事件流分为事件冒泡流和事件捕获流。那么什么是事件冒泡，什么是事件捕获呢？

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

　　事件捕获：不太具体的元素最早接收事件，而不太具体的元素最后接收事件。它跟事件冒泡是一个截然相反的概念。

2 事件处理程序

　　2.1 html事件处理程序

　　如下将事件处理程序嵌入到HTML元素当中

<div>
    <input type="button" value="按钮" id="btn1" onclick="showMes()"/>
</div>

<script type="text/javascript">
　　function showMes(){
　　　　alert(‘Hello World!‘);
　　}
</script>

　　2.2 DOM 0级事件处理程序 (用得比较多的)

　　下面的DOM 0级添加和删除事件事件处理程序的表现形式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>DOM事件探秘</title>
 7 </head>
 8 
 9 <body>
10     <input type="text" value="按钮2" id="btn2" />
11     <script type="text/javascript">
12          var oBtn2 = document.getElementById("btn2");
13          //DOM 0级添加事件处理程序
14          oBtn2.onclick = function(){
15               alert("这是通过DOM 0级添加的事件处理程序");
16          }
17          //DOM 0级删除事件处理程序
18          oBtn2.onclick = null;
19     </script>
20 </body>
21 </html>

　　2.3 DOM 2级事件处理程序

　　DOM 2级事件处理程序定义了两个方法：用于指定和删除事件处理程序的操作：

　　addEventListener()和removeEventListener(),它们接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值(false代表事件冒泡)

　　下面的DOM 2级添加和删除事件事件处理程序的表现形式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM事件探秘</title>
 6 </head>
 7 <body>
 8     <input type="button" value="按钮3"  id="btn3" />
 9     <script type="text/javascript">
10          function showMes(){
11              alert(‘这是通过DOM 2添加的事件处理程序‘);
12          }
13          var btn3 = document.getElementById(‘btn3‘);
14          // DOM 2级添加事件处理程序
15          btn3.addEventListener(‘click‘,showMes,false);
16          // DOM 2级删除事件处理程序
17          btn3.removeEventListener(‘click‘,showMes,false);    
18     </script>    
19 </body>
20 </html>

　　2.4 IE事件处理程序 (支持IE事件处理程序的浏览器是IE和Opera)

IE事件处理程序提供了两个类似DOM的方法:attachEvent()和detachEvent(),它们接收相同的两个参数：要处理的事件名，作为事件处理程序的函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM事件探秘</title>
 6 </head>
 7 <body>
 8     <input type="button" value="按钮3" id="btn3" />
 9     <script type="text/javascript">
10     function showMes() {
11         alert(‘IE事件处理程序‘);
12     }
13     var btn3 = document.getElementById(‘btn3‘);
14     // DOM 2级添加事件处理程序
15     btn3.attachEvent(‘click‘, showMes);
16     // DOM 2级删除事件处理程序
17     btn3.detachEvent(‘click‘, showMes);
18     </script>
19 </body>
20 </html>

　　2.5 跨浏览器的事件处理程序，将其封装在一个对象里，暂时就给它封装两个方法，添加事件和删除事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM事件探秘</title>
 6 </head>
 7 <body>
 8     <input type="button" value="按钮3" id="btn3" />
 9     <script>
10         var eventUtil = {
11             // 添加句柄
12             addHandler:function(ele,type,handler){
13                 if(ele.addEventListener){
14                     ele.addEventListener(type,handler,false);
15                 } else if(ele.attachEvent){
16                     ele.attachEvent(‘on‘+type,handler);
17                 } else {
18                     ele[‘on‘+type] = handler;
19                 }
20             },
21             removeHandler:function(ele,type,handler){
22                 if(ele.removeEventListener){
23                     ele.removeEventListener(type,handler,false);
24                 } else if(ele.detachEvent){
25                     ele.detachEvent(type,handler);
26                 } else {
27                     ele[‘on‘+type] = handler;
28                 }
29             }
30         }
31     </script>
32 </body>

3 事件对象

　　什么是事件对象？在触发DOM上的事件时都会产生一个对象event,在IE8以前是window.event

　　3.1 DOM中的事件对象(以下是比较常见的属性和方法)

　　　　(1) type属性用于获取事件类型

　　　　(2) target属性用于获取事件目标

　　　　(3) stopPropagation()方法用于阻止事件冒泡

　　　　(4) preventDefault()方法阻止事件的默认行为

　　3.2 IE中的事件对象

　　　　(1) type属性用于获取事件类型

　　　　(2) srcElement属性用于获取事件目标

　　　　(3) cancelBubble属性用于阻止事件冒泡，设置为true表示阻止冒泡，设置为false表示不阻止冒泡

　　　　(4) returnValue属性用于阻止事件的默认行为，设置为false表示阻止事件的默认行为，设置为true表示不阻止事件的默认行为

4 封装event.js,解决浏览器兼容问题

 1 var eventUtil = {
 2     // 添加句柄
 3     addHandler: function(ele, type, handler) {
 4         if (ele.addEventListener) {
 5             ele.addEventListener(type, handler, false);
 6         } else if (ele.attachEvent) {
 7             ele.attachEvent(‘on‘ + type, handler);
 8         } else {
 9             ele[‘on‘ + type] = handler;
10         }
11     },
12     //删除句柄
13     removeHandler: function(ele, type, handler) {
14         if (ele.removeEventListener) {
15             ele.removeEventListener(type, handler, false);
16         } else if (ele.detachEvent) {
17             ele.detachEvent(type, handler);
18         } else {
19             ele[‘on‘ + type] = handler;
20         }
21     },
22     //获取事件
23     getEvent: function(event) {
24             return event ? event : window.event;
25         }，
26         //获取事件类型
27     getType: function(event) {
28         return event.type;
29     },
30     //获取事件的目标
31     getElement: function(event) {
32         return event.target || event.srcElement;
33     },
34     //阻止事件的默认行为
35     preventDefault: function(event) {
36         if (event.preventDefault) {
37             event.preventDefault();
38         } else {
39             event.returnValue = false;
40         }
41     },
42     //阻止事件冒泡
43     stopPropagation: function(event) {
44         if (event.stopPropagation) {
45             event.stopPropagation();
46         } else {
47             event.cancelBubble = true;
48         }
49     }
50 }

以上是关于DOM事件探秘的主要内容，如果未能解决你的问题，请参考以下文章

DOM事件探秘

DOM事件探秘之事件流与事件处理程序

QQ面板拖拽（慕课网DOM事件探秘）（下）

DOM事件

测试必学探秘大厂全链路质量保障体系

使用 JQuery ajax 在 DOM 操作后附加事件