zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    索引
    mysql事务
    centos 7 gitlab安装服务器
    内网穿透工具 frp使用
    eslint配置
    nodejs连接mongodb(密码)
    插入排序
    直接插入排序
    koa中 log4js使用
    JS中的prototype、__proto__与constructor（图解）
  • 原文地址：https://www.cnblogs.com/chaofei/p/7688916.html
Copyright © 2011-2022 走看看