JS DOM事件处理程序

实验代码：
给button标签添加点击事件处理程序。

<script>

function onClick() {

alert("hello");

}

</script>

<button id="btn">测试</button>

1、HTML事件处理程序

<button id="btn" οnclick="onClick()">测试</button>

这种方式添加处理程序，js代码和html耦合，不利于维护，实际开发中，不推荐用。

2、DOM0级事件处理程序

var btn = document.getElementById("btn);

btn.οnclick=onClick(); //添加事件

//btn.οnclick=null; //移除事件

3、DOM2级事件处理程序

使用addEventListener函数添加事件处理程序。

 该函数总共有三个参数，第一个参数为事件名称，比如点击事件'click', 第二个参数为事件处理函数，第三个参数一个boolean类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)

var btn=document.getElementById("btn);

btn.addEventListener("click", onClick, false); //添加事件

//btn.removeEventListener("click", onClick, false); //移除事件

注意：

移除事件时，参数必须和添加事件的参数一致，且不能删除匿名事件处理函数。

4、IE事件处理程序

attachEvent： 添加事件处理函数

detachEvent： 移除事件处理函数

var btn=document.getElementById("btn);

btn.attachEvent ("click", onClick); //添加事件

//btn.detachEvent("click", onClick); //移除事件

、

编写一个跨浏览器的事件添加和移除的工具。

var eventUtil = {
//添加事件处理程序
addHandler: function(elem, type, handler) {
	if (elem.addEventListener) {
	<span style="white-space:pre">	</span>elem.addEventListener(type, handler, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent("on" + type, handler);
	}
	else {
		elem['on' + type] = handler;
	}
	},
	//移除事件处理程序
	removeHandler: function(elem, type, handler) {
		if (elem.removeEventListener) {
			elem.removeEventListener(type, handler, false);
		}
		else if (elem.detachEvent) {
			elem.detachEvent("on" + type, handler);
		}
		else {
			elem['on' + type] =  null;
		}
	}
};