DOM事件之事件对象

Posted 2020-11-22 jiguiyan

什么是事件对象呢？

在触发DOM上的事件时都会产生一个对象

事件对象event

1、Dom中的事件对象

 

a、type属性 用于获取事件类型

可以获取事件的类型：

代码：

function show123(event){
                
                //alert(‘欢迎来到perfect*博客园123‘);
                alert(event.type);
            }

 

点击按钮3

 

 b、target属性 用于获取事件目标

alert(event.target);

 

获取目标节点的名称：

alert(event.target.nodeName);

效果：

 

 

 

 

 

 

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

冒泡的现象：

 

 继上面的基础上进行代码的测试：

在代码中加入：

    
var box=document.getElementById(‘box‘);
function showbox(){
                alert("这是装按钮的容器!");
            }
eventUtil.addHandler(box,"click",showbox);

在该容器的的按钮中加入阻止冒泡的事件的时候：

function show123(event){
                
                //alert(‘欢迎来到perfect*博客园123‘);
                alert(event.target.nodeName);
                
                event.stopPropagation()
            }

只会显示事件目标的节点名称。

 

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

例如：a标签的默认行为就是跳转

可以通过event.preventDefault()进行阻止事件的默认行为

 

2、IE中的事件对象

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

（2）srcElement属性 用于获取事件的目标

（3）cancelBubble属性 用于阻止事件冒泡

  设置为true表示阻止冒泡 设置false表示不阻止冒泡

（4）returnValue属性 用于阻止事件的默认行为

    设置为false表示阻止事件的默认行为

 

例如：当没有阻止默认行为以及没有阻止冒泡行为和阻止默认行为以及阻止冒泡行为的效果：

 

 

所需要的代码

even.js

 1 //跨浏览器事件处理程序
 2             var eventUtil={
 3                 //添加句柄
 4                 //触发的对象,触发的事件类型,触发的操作
 5                 addHandler:function(element,type,handler){
 6                 //Dom2级事件处理程序的判断
 7                 if(element.addEventListener){
 8                     element.addEventListener(type,handler,false);
 9                     
10                     //IE事件处理程序的判断
11                     }else if(element.attachEvent){
12                         
13                         element.attachEvent(‘on‘+type,handler);
14                         //DOM0级事件处理程序的判断
15                         }else{
16                         element[‘on‘+type]=handler;
17                     }
18                 
19                 
20                 },
21                 
22                 //删除句柄
23                 //触发的对象,触发的事件类型,触发的操作
24                 removeHandler:function(element,type,handler){
25                 //Dom2级事件处理程序的判断
26                 if(element.removeEventListener){
27                     element.removeEventListener(type,handler,false);
28                     
29                     //IE事件处理程序的判断
30                     }else if(element.detachEvent){
31                         
32                         element.detachEvent(‘on‘+type,handler);
33                         //DOM0级事件处理程序的判断
34                         }else{
35                         element[‘on‘+type]=null;
36                     }
37                 
38                 
39                 },
40                 
41                 //获取兼容性的事件
42                 getEvent:function(event){
43                     return event?event:window.event;
44                     
45                 },
46                 getType:function(event){
47                     return event.type;
48                 },
49                 getElement:function(event){
50                     return event.target||event.srcElement;
51                 },
52                 preventDefault:function(event){
53                     if(event.preventDefault){
54                         event.preventDefault();
55                     }else{
56                         event.returnValue=false;//returnValue属性值设置为false时表示阻止默认行为
57                         
58                     }
59                     
60                     
61                 },
62                 
63                 stopPropagation:function(event){
64                     if(event.stopPropagation){
65                         event.stopPropagation();
66                     }else{
67                         event.cancelBubble=true;//cancelBubble属性值设置为true表示阻止其冒泡行为
68                         
69                         
70                     }
71                 }
72                 }

 

script.js

 

window.onload=function(){
    var go=document.getElementById("go"),
       box=document.getElementById("box");
       
       eventUtil.addHandler(box,‘click‘,function(){
           
           alert("我是整个父盒子！！！");
       });
       
       eventUtil.addHandler(go,‘click‘,function(e){
           e=eventUtil.getEvent(e);//=>e=e||window.event
           alert(eventUtil.getElement(e));
           //阻止其默认行为
         eventUtil.preventDefault(e);
           //阻止其冒泡行为
           eventUtil.stopPropagation(e);
           
           
           
           
           
       })
    
    
    
    
}

 

 

html:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>事件的冒泡</title>
 6         
 7     </head>
 8     <script src="js/event.js"></script>
 9     <script src="js/script.js"></script>
10     <body>
11         <div id="box">
12             <input type="button" value="按钮"  id="btn" onclick="show()"/>
13             <input type="button" value="按钮2"  id="btn2" />
14             <input type="button" value="按钮3"  id="btn3" />
15             <a href="tab.html" id="go">跳转</a>
16         </div>
17         
18     </body>
19 </html>