js事件流

Posted 逗比煎饼侠

tags:

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

1.html事件处理程序:

JS事件放在HTML里面。

 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>HTML事件处理程序</title>  
  5. </head>  
  6. <body>  
  7. <div>  
  8.     <input type="button" value="按钮" onclick="show">  
  9. </div>  
  10.   
  11. <script type="text/javascript">  
  12.     function show(){  
  13.         alert(‘hello world‘)  
  14.     }  
  15. </script>  
  16. </body>  
  17. </html>  


2.DOM0级事件处理程序：

 

 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>DOM0级事件处理程序</title>  
  5. </head>  
  6. <body>  
  7. <div id="box">  
  8.     <input type="button" value="按钮" id="btn">  
  9. </div>  
  10.   
  11. <script type="text/javascript">  
  12.     var btn=document.getElementById(‘btn‘);  
  13.     btn.onclick=function(){  
  14.         alert(‘hello world‘)  
  15.     }  
  16.   
  17.     btn.onclick=null;//取消onclick事件  
  18. </script>  
  19. </body>  
  20. </html>  

3.DOM2级事件处理程序

 

 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>DOM2级</title>  
  5. </head>  
  6. <body>  
  7. <div id="box">  
  8.     <input type="button" value="按钮" id="btn">  
  9. </div>  
  10. <script type="text/javascript">  
  11.     //DOM2级事件定义了两个方法  
  12.     //用于处理指定和删除事件程序的操作  
  13.     //addEventListener()和removeEventListener()  
  14.     //接收三个参数：要处理的时间名、事件处理程序、布尔值（true:捕获阶段、false:冒泡阶段）  
  15.     //一个按钮上可以添加多个事件  
  16.     var btn=document.getElementById(‘btn‘);  
  17.     btn.addEventListener(‘click‘,function(){  
  18.         alert(‘hello world‘);  
  19.     },false);  
  20.     //删除事件的参数必须和添加事件的一样，  
  21.     btn.removeEventListener(‘click‘,function(){  
  22.         alert(‘hello world‘);  
  23.     },false);  
  24.   
  25. </script>  
  26. </body>  
  27. </html>  


4.IE事件处理程序

 

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>IE事件处理程序</title>  
  5. </head>  
  6. <body>  
  7. <div id="box">  
  8.     <input type="button" value="按钮" id="btn">  
  9. </div>  
  10.   
  11. <script type="text/javascript">  
  12.     //attachEvent()添加事件  
  13.     //detachEvent()删除事件  
  14.     //接收相同的两个参数：事件名称、事件程序  
  15.   
  16.     var btn=document.getElementById(‘btn‘);  
  17.     btn.attachEvent(‘onclick‘,function(){  
  18.         alert(‘hello‘)  
  19.     });  
  20.     btn.detachEvent(‘onclick‘,function(){  
  21.         alert(‘hello‘)  
  22.     })  
  23. </script>  
  24. </body>  
  25. </html>  

5.跨浏览器事件处理程序

 

 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>跨浏览器事件处理</title>  
  5. </head>  
  6. <body>  
  7. <div id="box">  
  8.     <input type="button" value="按钮" id="btn">  
  9. </div>  
  10.   
  11.   
  12. <script type="text/javascript">  
  13.     function show(){  
  14.         alert(‘hello‘);  
  15.     }  
  16.     var eventUtil={  
  17.         //添加事件  
  18.         addHandler:function(element,type,handler){  
  19.             if(element.addEventListener){  
  20.                 addEventListener(type,handler,false);  
  21.             }else if(element.attachEvent){  
  22.                 attachEvent(‘on‘+type,handler);  
  23.             }else{    
  24.                 element[‘on‘+type]=handler;  
  25.             }  
  26.         }  
  27.         //删除事件  
  28.         removeHandler:function(element,type,handler){  
  29.             if(element.removeEventListener){  
  30.                 removeEventListener(type,handler,false);  
  31.             }else if(element.attachEvent){  
  32.                 detachEvent(‘on‘+type,handler);  
  33.             }else{    
  34.                 element[‘on‘+type]=null;  
  35.             }  
  36.         }  
  37.     }  
  38.     eventUtil.addHandler(btn,‘click‘,show);  
  39.     eventUtil.removeHandler(btn,‘click‘,show);  
  40. </script>  
  41. </body>  
  42. </html>  


6.DOM事件对象

 

 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>DOM事件对象</title>  
  5. </head>  
  6. <body>  
  7. <div id="box">  
  8.     <input type="button" value="按钮" id="btn">  
  9.     <a href="http://www.baidu.com" id=‘go‘>跳转</a>  
  10. </div>  
  11.   
  12. <script type="text/javascript">  
  13.     //1.DOM的事件对象  
  14.         //(1)type属性 用于获取时间类型  
  15.         //(2)target属性 用户获取事件目标  
  16.         //(3)stopPropagation()阻止事件冒泡  
  17.         //(4)preventDefault()阻止默认行为  
  18.   
  19.   
  20.         var btn=document.getElementById(‘btn‘);  
  21.         var box=document.getElementById(‘box‘);  
  22.         var go=document.getElementById(‘go‘);  
  23.         btn.onclick=function(e){  
  24.             alert(‘btn‘)  
  25.             e.stopPropagation();  
  26.         };  
  27.         box.onclick=function(){  
  28.             alert(‘box‘)  
  29.         };  
  30.         go.onclick=function(e){  
  31.             e.stopPropagation();  
  32.             e.preventDefault();  
  33.         }  
  34. </script>  
  35. </body>  
  36. </html>  


7.IE事件对象

 

 
 
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title>IE事件对象</title>  
    5. </head>  
    6. <body>  
    7.   
    8. <div id="box">  
    9.     <a href="" id="go">跳转</a>  
    10. </div>  
    11. <script type="text/javascript">  
    12.     //1.IE的事件对象  
    13.         //(1)type属性 用于获取时间类型  
    14.         //(2)srcElement属性 用户获取事件目标  
    15.         //(3)cancelBubble属性：true:阻止事件冒泡  
    16.         //(4)returnValue属性：flase:阻止默认行为  
    17. window.onload=function(){  
    18.     var go=document.getElementById(‘go‘);  
    19.     var box=document.getElementById(‘box‘);  
    20.     eventUtil.addHandler(box,‘click‘,function(){  
    21.         alert(‘111‘)  
    22.     })  
    23. }  
    24.         var eventUtil={  
    25.         //添加事件  
    26.         addHandler:function(element,type,handler){  
    27.             if(element.addEventListener){  
    28.                 addEventListener(type,handler,false);  
    29.             }else if(element.attachEvent){  
    30.                 attachEvent(‘on‘+type,handler);  
    31.             }else{    
    32.                 element[‘on‘+type]=handler;  
    33.             }  
    34.         },  
    35.         //删除事件  
    36.         removeHandler:function(element,type,handler){  
    37.             if(element.removeEventListener){  
    38.                 removeEventListener(type,handler,false);  
    39.             }else if(element.attachEvent){  
    40.                 detachEvent(‘on‘+type,handler);  
    41.             }else{    
    42.                 element[‘on‘+type]=null;  
    43.             }  
    44.         },  
    45.   
    46.         getEvent:function(event){  
    47.             return event?event:window.event;  
    48.         },  
    49.         getType:function(event){  
    50.             return event.type;  
    51.         },  
    52.         getTarget:function(){  
    53.             return event.target||event.srcElement  
    54.         },  
    55.         preventDefault:function(event){  
    56.             if(event.preventDefault{  
    57.                 event.preventDefault()  
    58.             }else{  
    59.                 event.returnValue=false;  
    60.             }  
    61.         },  
    62.         stopPropagation:function(){  
    63.             if(event.stopPropagation){  
    64.                 event.stopPropagation();  
    65.             }else{  
    66.                 event.cancelBubble:false;  
    67.             }  
    68.         }  
    69.     }  
    70. </script>  
    71. </body>  
    72. </html>  










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

js事件事件委托

JS事件流

js013-事件

js事件流

JS里关于事件的常被考察的知识点：事件流事件广播原生JS实现事件代理

JS高程3：事件