为元素节点添加事件处理程序

方法一：直接在HTML代码中，为元素的onclick绑定时间（DOM 0级事件）

<button οnclick="alert('hello')">按钮</button>	

　　缺点：html和js的代码杂糅，耦合度高，修改不方便

 

方法二：使用JavaScript的DOM编程，获取元素节点，然后绑定事件

<button id="btn">按钮</button>	
<script>
	//方案一：绑定匿名函数
	document.getElementById("btn").οnclick=function(){ alert("hello"); }

	//方案二：绑定函数名
	function showMsg(){
		alert("hello");
	}
	document.getElementById("btn").οnclick=showMsg;

	//注意绑定函数名的时候不要加括号，加括号的话，函数会立即执行，然后将结果赋值给onclick
	//document.getElementById("btn").οnclick=showMsg();
</script>    

　　

　　

方法三：使用addEventListener和removeEventListener,IE使用attachEvent，detachEvent（DOM 2级事件）

　　首先是addEventListener和removeEventListener

　　这两个方法都需要三个参数，

　　　　第一个参数是要处理的事件（click、mouseout、mouseover...)，注意不要加on

　　　　第二个参数是要绑定的处理程序（如上面的showMsg或者匿名函数）

　　　　第三个参数表示选择事件冒泡（内到外）或者事件捕获（外到内），false表示选择事件冒泡（推荐），true表示选择事件捕获

<button id="btn1">按钮1</button>	
<button id="btn2">按钮2</button>	
<script>
	var btn1 = document.getElementById("btn1");
	btn1.addEventListener("click",function(){alert("hello one");},false);

	var btn2 = document.getElementById("btn2");
	function showMsg(){
		alert("hello two");
	}
	btn2.addEventListener("click",showMsg,false);
</script>

　　通过addEventListener添加的事件，只能使用removeEventListener来取消，并且removeEventListener的三个参数要和addEventListener的三个参数相同，所以建议在绑定事件的时候，最好不要使用匿名函数的形式，因尽量使用函数名的形式。

<button id="btn">按钮</button>	
<script>
	var btn = document.getElementById("btn");
	function showMsg(){
		alert("hello two");
	}
	//添加事件
	btn.addEventListener("click",showMsg,false);

	//取消事件
	btn.removeEventListener("click",showMsg,false);
</script>

 

　　然后是：attachEvent，detachEvent

　　IE8及之前的版本不支持addEventListener和removeEventListener，支持的是attachEvent()和detachEvent()。

　　首先IE都兼容一下做法来添加事件处理程序：

　　　　1、直接在HTML代码的元素属性的位置为事件绑定处理程序；

　　　　2、使用JavaScript的 node.οnclick=function(){}

　　attachEvent()和detachEvent()都需要两个参数：

　　　　第一个参数是要绑定的事件（onclick、onmouseover.....注意和addEventListener不同)

　　　　第二个参数是要绑定的处理程序（匿名函数或者函数名，注意如果不是匿名函数，函数名不要加括号）

　　在使用addEventListener之前应该先检测当前浏览器是否支持该方法，可以将代码封装到一个对象中：

<button id="btn">按钮</button>	
<script>
	var eventUtil = {
		//type 传入 click mouseover，而不传onclick,mouseover
		addEvent : function(element, type, func){
			if (element.addEventListener) {    //所有主流浏览器，除了 IE 8 及更早 IE版本
			    element.addEventListener(type, func, false);
			} else if(element.attachEvent) {  // IE 8 及更早 IE 版本
			    element.attachEvent('on'+type, func);
			} else {
				var type = "on"+type;
				//element.type = func; //wrong,不会成功
				element[type] = func;
			}
		},
		removeEvent : function(element, type, func){
			if (element.removeEventListener) {    //所有主流浏览器，除了 IE 8 及更早 IE版本
			    element.removeEventListener(type, func, false);
			} else if(element.detachEvent) {  // IE 8 及更早 IE 版本
			    element.detachEvent('on'+type, func);
			} else {
				var type = "on"+type;
				//element.type = null; //wrong,不会成功
				element[type] = null;
			}
		}
	}

	var btn = document.getElementById("btn");
	function showOne(){ alert("one"); }
	eventUtil.addEvent(btn, "click", showOne);
	eventUtil.removeEvent(btn, "click", showOne);
</script>

　　　　

注意:

　　1、DOM 0级事件    和 　 DOM 2级事件 都可以为同一个事件（比如click事件）绑定多个处理程序，执行的顺序与绑定的先后顺序相同。

　　2、使用JavaScript给元素节点的同一个事件（onclick）绑定多个事件后，后面的会覆盖前面的，所以只保留最后一个绑定事件处理程序。但是，可以使用递归算法实现绑定多个事件处理程序，如下面的代码

<button id="btn">按钮</button>	
<script>
	var btn = document.getElementById("btn");
	function addEvent(node, func){
		var old = node.onclick;
		if( typeof node.onclick != "function" ){
			node.onclick = func;
		} else {
			node.onclick = function(){
				old();
				func();
			}
		}
	}

	function showOne(){ alert("one"); }
	function showTwo(){ alert("two"); }

	addEvent(btn, showOne);
	addEvent(btn, showTwo);
</script>

　　

　　3、如果不使用上面的代码中的addEvent(node, func)，直接使用btn.οnclick=function(){}会覆盖掉方法一的直接在HTML代码中绑定事件，而addEvent不会。

　　4、如果一个元素节点同时使用方法一那样，直接在元素节点的onclick绑定事件，同时有使用方法二那样在onclick上面绑定事件，然后利用addEventListener添加onclick事件，最终，执行顺序是：

　　使用方法三绑定的处理程序执行顺序要晚于 方法一 和 方法二，注意上面的注意点3

 

　　

 

转载于:https://www.cnblogs.com/-beyond/p/8474548.html