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