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);