当前位置：首页 > 编程语言 > js事件流

js事件流

2021-05-22 23:28

阅读：434

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

1.HTML事件处理程序:

JS事件放在HTML里面。

 
 
  1. 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. 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. 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. 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. 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. 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. 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

上一篇：jQuery删除元素

下一篇：基于Nginx配置https证书

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：js事件流
文章链接：http://soscw.com/index.php/essay/88044.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1