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){//IEelement.detachEvent("on"+type,handler);}else{element["on"+type]=handler;}}}