事件注册封装------彭记（012）

事件注册封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .big{
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            background-color: skyblue;
        }
        .small{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: hotpink;
        }
    </style>
</head>
<body>
<div id="big" class="big">rrttyy</div>
<p id="pp">asddfasdf基本原则</p>
<script>
    /*没有兼容性
    * 1.onclick(function(){})
    *
    * IE 9 及以上
    * 2.addEventListener(type,function(),true/false)
    *
    *IE 6 ~10
    * attachEvent("on"+type,function(){})*/

    var div = document.getElementById("big");
    var p = document.getElementById("pp");

    var registerType = getRegister();

    registerType(div,"click",function(e){
        console.log(e);
        console.log(this.innerHTML);
        console.log('click');
    });
    registerType(p,"mouseover",function(e){
        console.log(e);
        console.log(this.innerHTML);
        console.log('mouseover');
    });


    /*获取当前浏览器的绑定方式*/
    function getRegister(){
        console.log('看看有没有反复调用?');
        /*意味着我需要通过addEventListener的方式绑定事件*/
        /*handler:事件处理函数*/
        if(document.addEventListener){
            return function (dom,type,handler){
                dom.addEventListener(type,handler);
            }
        }else if(document.attachEvent){
            return function (dom,type,handler){
                /*IE低版本中 IE7及以下：
                * 1.并不会将事件源参数返回到事件处理函数中
                * 2.事件处理函数中的this是当前的window对象*/
                //dom.attachEvent("on"+type,handler);
                dom.attachEvent("on"+type,function(){
                    handler.call(dom,window.event);
                });
            }
        }else{
            return function (dom,type,handler){
                dom["on"+type] = handler;
            }
        }
    }
</script>
</body>
</html>

 

posted @ 2017-08-17 14:11  依旧安好  阅读(169)  评论(0)    收藏  举报