• 事件绑定兼容函数


      来源《JavaScript高级程序设计》

      代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6 
     7     </style>
     8     <script type="text/javascript">
     9         var EventUtil = {
    10             addHandler:function(element,type,handler){//绑定事件
    11                 if(element.addEventListener){//现代浏览器,作用域是在其所属元素的作用域内
    12                     element.addEventListener(type,handler,false);
    13                 }
    14                 else if(element.attachEvent){//IE8及其以下,作用域是全局作用域
    15                     element.attachEvent("on"+type,handler);
    16                 }
    17                 else{//DOM2级方法,作用域在其所属的元素的作用域内
    18                     element["on"+type] = handler;
    19                 }
    20             },
    21             getEvent:function(event){//获取event对象
    22                 return event ? event : window.event;
    23             },
    24             getTarget:function(event){//获取目标元素
    25                 return event.target || event.srcElement;
    26             },
    27             preventDefault:function(event){//取消默认行为
    28                 if(event.preventDefault){
    29                     event.preventDefault();
    30                 }
    31                 else{
    32                     event.returnValue = false;
    33                 }
    34             },
    35             removeHandler:function(element,type,handler){//解除事件绑定
    36                 if(element.removeEventListener){
    37                     element.removeEventListener(type,handler,false);
    38                 }
    39                 else if(element.detachEvent){
    40                     element.detachEvent("on"+type,handler);
    41                 }
    42                 else{
    43                     element["on"+type] = null;
    44                 }
    45             },
    46             stopPropagation:function(event){
    47                 if(event.stopPropagation){
    48                     event.stopPropagation();
    49                 }
    50                 else{
    51                     event.cancelBubble = true;
    52                 }
    53             }
    54         };
    55         function handler(){
    56             alert(this);
    57         }
    58         window.onload = function(){//使用例子
    59             var btn = document.getElementById("btn");
    60             //EventUtil.addHandler(btn,"click",handler);
    61             btn.onclick = function(event){
    62                 var event = EventUtil.getEvent(event);
    63                 console.log(event);
    64             }
    65         }
    66     </script>
    67 </head>
    68 <body>
    69     <input type="button" value="点击" id="btn">
    70 </body> 
    71 </html>
  • 相关阅读:
    day08作业
    day07作业
    day06作业
    day05作业
    OOAD与UML
    大数据(3):基于sogou.500w.utf8数据Hbase和Spark实践
    大数据(2):基于sogou.500w.utf8数据hive的实践
    大数据(1):基于sogou.500w.utf8数据的MapReduce程序设计
    九大排序算法的Java实现
    数字在排序数组中出现的次数
  • 原文地址:https://www.cnblogs.com/loveya/p/5460530.html
Copyright © 2020-2023  润新知