JS事件处理程序:HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器的事件处理程序。

HTML事件处理程序

<script type="text/javascript">

function showMessage(){

  alert("Hello world!");

}

</script>

<input type="button" value="CLICK ME" onclick="showMessage()">

DOM0级事件处理程序

将一个函数赋值给 一个事件处理程序属性。

var btn = document.getElementById("myBtn");

btn.onclick = function(){

  alert(this.id);

}

btn.onclick=null;//删除事件处理程序

DOM2级事件处理程序

定义了2个方法,用于指定和删除事件处理程序的操作:addEventListener()和removeEventListener();

var btn = document.getElementById("myBtn");

btn.addEventListener("click",function(){

  alert(this.id);

},false);

btn.removeEventListener("click",function(){//没用的

  alert(this.id);

},false);

正确的写法:

var handler = function(){

  alert(this.id);

}

btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false);

IE事件处理程序

IE中实现了与DOM类似的方法:attachEvent(),detachEvent();

var btn = document.getElementById("myBtn");

var handler = function(){

  alert("Clicked");

}

btn.attachEvent("onclick",handler);

btn.detachEvent("onclick",handler);

跨浏览器的事件处理程序

var btn = document.getElementById("myBtn");

var handler = function(){

  alert("Clicked");

}

EventUtil.addHandler(btn,"click",handler);

EventUtil.removeHandler(btn,"click",handler);

05-08 08:12