相应某个事件的函数叫做事件处理程序(或事件侦听器)。
1、TTML事件处理程序
<script type="text/javascript">
function showMessage() {
alert('hello world!');
}
</script>
<input type="button" value="Click Me" onclick="showMessage()">
缺点:
1.存在一个时差问题
2.这样扩展事件处理程序的作用域在不同的浏览器中会导致不同结果
3.HTML与JavaScript代码紧密耦合
2、DOM0级事件处理程序
将一个函数复制给一个事件处理程序属性,使用DOM0级事件处理程序被认为是元素的方法。
var btn=document.getElementById('myBtn');
btn.onclick=function () {
alert('Clicked');
}
3、DOM2级事件处理程序
指定事件处理程序:addEventListener(),删除事件处理程序:removeEventListener()
接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后一个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用。
添加事件处理程序
var btn=document.getElementById('myBtn');
btn.addEventListener('click',function () {
alert(this.id);
},false);
移除事件处理程序
var btn=document.getElementById('myBtn');
var hander=function(){
alert(this.id);
}
btn.addEventListener('click',hander,false);
btn.removeEventListener('click',hander,false);
注意:通过addEventListener()添加的匿名函数将无法移除。
4、IE事件处理程序
指定事件处理程序:attachEvent(),删除事件处理程序:detachEvent()
接收两个参数:要处理的事件名、作为事件处理程序的函数。
5、跨浏览器事件处理程序
要保证事件处理事件的代码能在大多数浏览器下一致地运行,只需要关注冒泡阶段。
var EvenUtil={
addHander:function (el,type,hander) {
if(el.addEventListener){
el.addEventListener(type,hander,false);
}else if(el.attachEvent){
el.attachEvent("on"+type,hander);
}else {
el["on"+type]=hander;
}
},
removeHander:function (el.type,hander) {
//
}
};