码迷，mamicode.com
首页 > Web开发 > 详细

js事件流

时间：2017-10-18 21:40:20      阅读：560      评论：0      收藏：0      [点我收藏+]

标签：事件对象   布尔   value   view   move   toc   lan   veh   bsp   

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事件流

标签：事件对象   布尔   value   view   move   toc   lan   veh   bsp   

原文地址：http://www.cnblogs.com/chaofei/p/7688916.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！