EventUtil_Bubble

 

<!DOCTYPE html>
<html>
<head>
    <style>
        #a {
            width: 500px;
            height: 500px;
            background: #ff0000
        }
        #b {
            width: 200px;
            height: 200px;
            background: #00ff00
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
</body>

<script type="text/javascript">
    //函数
    var fa = function () {
        alert("a");
    }

    var fb = function (event) {
        alert("b");
    }



    
var EventUtil = {
   //注册
   addHandler: function(element, type, handler){
     if (element.addEventListener){
         console.log("element.addEventListener");
         element.addEventListener(type, handler, false);
     } else if (element.attachEvent){
         console.log("element.attachEvent");
         element.attachEvent("on" + type, handler);
     } else {
       element["on" + type] = handler;
     }
   },
   //移除注册
   removeHandler: function(element, type, handler){
     if (element.removeEventListener){
             element.removeEventListener(type, handler, false);
     } else if (element.detachEvent){
             element.detachEvent("on" + type, handler);
     } else {
             element["on" + type] = null;
     }
   }             
  }; 

    //A
    var A = document.getElementById("a");
    //A.addEventListener("click", fa, false);
    EventUtil.addHandler(A, "click", fa);

    //B
    var B = document.getElementById("b");
    //B.addEventListener("click", fb, false);
    EventUtil.addHandler(B, "click", fb);

</script>
</html>

 

posted @ 2017-10-16 16:18  sky20080101  阅读(35)  评论(0)    收藏  举报