浏览器在事件处理程序上,根据现有及过往浏览器类型,总共有5种形式:查看5种事件处理程序详情
1)HTML事件处理程序
2)DOM0 级事件处理程序
3)DOM2 级事件处理程序
4)IE事件处理程序
5)跨浏览器的事件处理程序
在我们使用IE事件处理程序时,我们会用到两个函数attachEvent()和detachEvent();因为目前IE11已经不再支持前述的两个函数了,当我们使用attachEvent进行事件处理时,浏览器会报错。因此,浏览器不支持attachEvent事件的原因:
支持IE 事件处理程序的浏览器有IE 和Opera。且IE11已经不再支持attachEvent()和detachEvent()。
为解决浏览器不支持attachEvent事件的问题,最佳方式是采用跨浏览器的事件处理程序方法。
<!-- 跨浏览器的事件处理程序 begin -->
<div>
<input id="expBtn" type="button" value="跨浏览器的事件处理程序">
</div>
<script>
var EventUtil = {
/*
* 添加事件
* @param: element 要操作的元素
* @param: type 事件名称
* @param: handler 事件处理程序函数
*/
addHandler: function (element, type, handler) {
if (element.addEventListener) {
// DOM2 级事件处理程序
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
// IE事件处理程序
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
/*
* 删除已添加事件
* @param: element 要操作的元素
* @param: type 事件名称
* @param: handler 事件处理程序函数
*/
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
// DOM2 级事件处理程序
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
// IE事件处理程序
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
var expbtn = document.getElementById('expBtn');
var fun = function(){
alert('clicked');
}
EventUtil.addHandler(expbtn, "click", fun);
EventUtil.removeHandler(btn, "click", handler);
// 备注:只支持DOM0 级的浏览器已经没有那么多了,所以未对DOM0进行处理
</script>
<!-- 跨浏览器的事件处理程序 end -->
采用跨浏览器的事件处理程序,即可跨浏览器进行事件处理程序的调用。