事件注册 addEventListener attachEvent removeEventListener detachEvent 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件注册</title>
    </head>
    <body>
        <button id="btn" value="按钮">按钮</button>
        <script type="">
            window.onload = function(){
                var btn = document.getElementById("btn");
                
                var handler = function(){
                    alert("thanks!");
                }
                //addEventListener(事件类型不要加“on”,事件发生时调用的函数，布尔值一般为false若为true函数将注册为捕获时间处理程序)
                if (btn.addEventListener) {//ie8及之前版本外的所有浏览器支持的标准事件模型
                    btn.addEventListener("click", handler, false);
                } else if(btn.attachEvent){//兼容ie9以下版本
                    btn.attachEvent("onclick", handler);//attachEvent(事件类型要加“on”,事件发生时调用的函数)
                }else{
                    btn.onclick = handler;//普通注册事件
                }
                
                //封装自己的 句柄事件 
                var myUtilEvent = {
                    myAddHandler:function(element, eType, hanlder){//添加句柄
                        if(element.addEventListener){//ie8及之前版本外的所有浏览器支持的标准事件模型
                            element.addEventListener(eType, hanlder, false);
                        }else if(element.attachEvent){
                            element.attachEvent(eType, hanlder);//兼容ie9以下版本
                        }else{
                            element["on" + eType] = hanlder;
                        }
                    },
                    myRemoveHandler:function(element, eType, hanlder){//删除句柄
                        if(element.removeEventListener){
                            element.removeEventListener(eType, hanlder, false);
                        }else if(element.detachEvent){
                            element.detachEvent("on" + eType, hanlder);
                        }else{
                            element["on" + eType] = null;
                        }
                    }
                }
                
                //封装后上面即可这样调用，跟上面的结果一样
                myUtilEvent.myAddHandler(btn, 'click', handler);
            
            }
        </script>
    </body>
</html>

 

posted on 2016-03-24 10:49  发烧开发者  阅读(187)  评论(0)    收藏  举报

导航