javascript事件处理程序-蒲公英云

javascript事件处理程序

javascript 事件处理程序

1、普通事件处理程序

<input  type="button" value="click me" οnclick="showMessage()"  />
function showMessage(){
    alert("clicked");
}

2、DOMO 级事件处理程序

<span style="white-space:pre">    </span>//老方法
     var btn=document.getElementById("myBtn");    
     //dom扩展方法 支持主流浏览器，类似jquery语法
     var btn=document.querySelector("#myBtn");
     btn.οnclick=function(){
         alert("clicked!");
     };

3、DOM2 级事件处理程序

主要介绍这个，上面两个大家应该都很熟悉了。DOM2事件处理程序定义了两个方法,用于添加和删除事件处理程序操作:addEventListener() 和 removeEventListener()

所有DOM节点都包含这两个方法，他们有3个参数：要处理的事件名、函数、布尔值（true捕获阶段执行，false冒泡阶段执行），一般填false

例子：

var btn=document.getElementById("myBtn");    
     btn.addEventListener("click",function(){
         alert("clicked!");
     },false);
//传入removeEventListener 的参数必须和addEventListener 一样
     btn.removeEventListener("click",function(){
         //这里不会执行 没有用--
         alert("clicked!");
     },false);

IE实现了两个类似的方法：attachEvent()和detachEvent() ，接受两个参数。没有八个bool值

例子：

var btn=document.getElementById("myBtn");    
     btn.attachEvent("onclick",function(){
         alert("clicked");
     });
btn.detachEvent("onclick",function(){
         alert("clicked");
     });

所以我们这边也写了个跨浏览器的事件处理程序：

//跨浏览器 事件处理程序
    var EventUtil= {
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                //除IE 其他
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                //IE
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        }
    }