一、4种事件处理程序
事件就是用户或浏览器自身执行的某种操作，而事件处理程序即为响应某个事件的函数。事件处理程序大致分为5种：
- HTML 事件处理程序
- DOM 0级事件处理程序
- DOM 2级事件处理程序
- IE 事件处理程序
二、HTML 事件处理程序
什么是 HTML 事件处理程序呢？ 显然，HTML 事件处理程序是写在 HTML 标签内的函数。
HTML 事件处理程序有两种写法：
- 最常见的是 HTML 中的事件处理
<button onclick="alert('我是HTML事件处理程序方法1')">按钮1</button>
- 调用页面中的函数执行
<button onclick="test()">按钮2</button>
<script type="text/javascript">
function fun(){
alert('我是HTML事件处理程序方法2');
};
</script>
但是 HTML 事件处理程序存在着一些问题，比如修改时需要该动HTML代码和函数处理的的代码，比较麻烦。
三、DOM 0级事件处理程序（所有浏览器都支持）
DOM 0级事件处理程序是将一个函数赋值给一个事件处理程序属性。
<button id="btn">我是DOM 0级事件处理程序</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("我是DOM 0级事件处理程序");
}
</script>
删除事件处理程序的方法是：
btn.onclick = null;
四、DOM 2级事件处理程序（只有IE9、chrome、safari和opera支持）
DOM 2级事件处理程序有两个方法：
- addEventListener() //添加事件监听器
- removeEventListener() //移除事件监听器
参数：
- type --事件名，如：click、change、mouseover等
- handler --事件处理函数
- true/false --true:捕获阶段调用事件处理程序，false:冒泡阶段调用事件处理程序。
例子：
<button id="btn">我是DOM 2级事件处理程序</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
var test = function(){
alert("我是DOM 2级事件处理程序！");
};
// 添加事件监听器
btn.addEventListener("click", test, false);
// 移除事件监听器
btn.removeEventListener("click", test, false);
</script>
五、IE事件处理程序
IE事件处理程序同样也有两个方法：
- attachEvent() //添加事件
- detaEvent() //移除事件
参数：
- type --事件名，如：click、change、mouseover等
- handler --事件处理函数
例子：
<button id="btn">我是IE事件处理程序</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
var test = function(){
alert("我是IE事件处理程序！");
};
// 添加事件
btn.attachEvent("onclick", test);
// 移除事件
btn.detaEvent("onclick", test);
</script>
六、跨浏览器事件处理程序
<button id="btn">我是跨浏览器事件处理程序</button>
<script type="text/javascript">
function showMes(){
alert('我是跨浏览器事件处理程序');
};
var btn = document.getElementById('btn');
<!-- 跨浏览器事件处理程序 -->
var eventUtil = {
// 添加句柄(handler:触发什么操作)
addHandler: function(element, type, handler){
if (element.addEventListener) {
// DOM 2级事件处理程序判断
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
// IE 事件处理程序判断
element.attachEvent('on'+type, handler);
} else {
// DOM 0级事件处理程序判断
element['on'+type] = handler;
}
},
// 删除句柄(handler:触发什么操作)
removeHandler: function(element, type, handler){
if (element.removeEventListener) {
// DOM 2级事件处理程序判断
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
// IE 事件处理程序判断
element.detachEvent('on'+type, handler);
} else {
// DOM 0级事件处理程序判断
element['on'+type] = null;
}
}
};
eventUtil.addHandler(btn, 'click', showMes);
eventUtil.removeHandler(btn, 'click', showMes);
</script>
注：要想弹出对话框就要注释掉调用移除函数的代码，比如：
eventUtil.removeHandler(btn, 'click', showMes);
希望本文对大家的学习能够有所帮助，感谢大家的阅览！
欢迎大家关注我的博客
网友评论