为HTML元素添加多个事件处理程序

Posted 寻觅beyond

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为HTML元素添加多个事件处理程序相关的知识,希望对你有一定的参考价值。

方法一:直接在html代码中,为元素的onclick绑定时间(DOM 0级事件)

<button onclick="alert(‘hello‘)">按钮</button>	

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

 

方法二:使用javascript的DOM编程,获取元素节点,然后绑定事件

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

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

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

  

  

方法三:使用addEventListener和removeEventListener   (DOM 2级事件)

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

    第一个参数是要处理的事件(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>

 

注意:

  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.onclick=function(){}会覆盖掉方法一的直接在HTML代码中绑定事件,而addEvent不会。

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

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

 

  

 

以上是关于为HTML元素添加多个事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章

为什么ajax加载出来的html,无法用选择器绑定事件?

wpf窗体添加事件的地方在哪里?

浅谈Jquery中的bind()live()delegate()on()绑定事件方式

jquery的bind()和trigger()

javascript添加HTML事件处理程序的两种方式学习

jquery bind()方法 语法