事件处理

Posted 2020-08-09

一.事件流（描述的是从页面接受事件的顺序）

1.事件冒泡（IE）

　　事件由最开始的元素接收，然后逐级向上传播，直到document的顺序触发

2.事件捕获（Netscape）

　　事件由document开始触发，最后到精确的节点。

二.事件处理程序

1.html事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理程序

　　DOM2级事件定义了两个方法：

　　1)添加事件监听器：addEventListener()

　　2)删除事件监听器：removeEventListener()

　　以上两个方法都需要接受三个参数，一是需要的事件名，二是事件处理程序的函数，三是boolean值（一般是false，表示事件的冒泡）

4.IE事件处理程序　

　　1)添加事件：attachEvent()

　　2)删除事件：detachEvent()

　　以上两个方法只需要接受两个参数，一是事件处理程序的事件名，二是事件处理程序的函数

　　不接受第三个参数的原因：IE8以及更早的版本只支持事件冒泡

5.跨浏览器的处理程序

　　封装一个对象

 1 <script>
 2 //跨浏览器事件处理程序
 3     var eventUtil={
 4         //添加句柄
 5         addHandler:function(element,type,handler){
 6             if(element.addEventListener()){
 7                 element.addEventListener(type,handler,false);
 8             }else if(element.attachEvent()){
 9                 element.attachEvent(‘on‘+type,handler);
10             }else{
11                 element[‘on‘+type]=handler;
12             }
13         },
14         //删除句柄
15         removeHandler:function(element,type,handler){
16             if(element.removeEventListener()){
17                 element.removeEventListener(type,handler,false);
18             }else if(element.detachEvent()){
19                 element.detachEvent(‘on‘+type,handler);
20             }else{
21                 element[‘on‘+type]=null;
22             }
23         }
24     };
25 
26     eventUtil.addHandler(btn1,‘click‘,showMessage);
27 </script>

本人自学小白一个，望大牛指点。