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>  
  • 相关阅读:
    Roce ofed 环境搭建与测试
    Ubuntu 1804 搭建NFS服务器
    Redhat 8.0.0 安装与网络配置
    Centos 8.1 安装与网络配置
    SUSE 15.1 系统安装
    VSpare ESXi 7.0 基本使用（模板、iso、SRIOV）
    VSpare ESXi 7.0 服务器安装
    open SUSE leap 15.1 安装图解
    KVM虚拟机网卡连接网桥
    GitHub Action一键部署配置，值得拥有
  • 原文地址：https://www.cnblogs.com/chaofei/p/7688916.html
Copyright © 2011-2022 走看看