javascript事件处理程序(事件侦听器)

发表于 | 分类于

今天说一下javascript 事件处理程序也叫事件侦听器,什么是事件处理程序？那首先，什么是事件？事件就是用户或者浏览器自身执行的某种动作，如：click、load等都是事件的名字。而响应时间的函数就叫做事件处理程序，如：onclick，onload

添加事件处理程序的方法

为元素添加事件处理程序有多种方法：

一、在元素上添加，如：

1
<input type="button" value="clickMe" onclick="alert(value)"/>  //这里用的是value而不是this.value,当然用this.value也是可以的，this指的是目标元素本身

这种方法的优点在于他拓展作用域的方式，在函数内部可以直接访问document以及元素本身的属性。如下代码，点击按钮会弹出输入框中的值：

1
2
3
4
<form>
	<input type="text" name="userName"/>
	<input type="button" value="userName's value" onclick="alert(userName.value)"/> 
</form>

缺点在于：
1、会有时差问题，因为很多时候侦听器要处理的并不是简单的一个语句，而是一个功能，如果点击时页面还没有加载完成点击时要执行的函数，那么就会报错。这样我们可以把他邓庄到一个try-catch块中来捕捉错误，如：

1
<input type="button" value="userName's value" onclick="try{sth();}catch(ex){}"/>

2、可能会有兼容问题
3、html与javascript紧密耦合，不利于维护。

二、为元素指定事件处理程序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
	<input type="text" name="userName" id="userName"/>
	<input type="button" value="clickMe" id="button" /> 
</form>
var btn = document.getElementById("button");
var userName = document.getElementById("userName");
btn.onclick = function(){
	alert(userName.value);  //userName's value  这时要想获取userName的value必须取得userName的引用
	alert(this.value);    //这里的this指的是当前点击的元素
}
btn.onclick = function(){	//如果为btn绑定多次click事件的话只识别最后一次
	alert(1);						
}
//btn.onclick = null    //取消注释之后将删除btn的click事件，即点击btn将不再有任何反应

这种方法的优点在于1、绑定简单2、不会有浏览器兼容问题
缺点在于当需要操作的元素很多时，对DOM的操作太多，函数太多会占用内存，影响网站的性能

三、addEventListener()：

addEvenetListener()接受三个参数：1、事件名，如click注意不是onclick 2、执行函数 3、true or false(true表示在事件捕获阶段调用，false表示在事件冒泡阶段调用)。特别说明：不建议在事件捕获阶段调用，也就是不建议使用true,除非特别需要，因为会有兼容问题

1
2
3
4
5
6
7
8
9
<input type="button" value="clickMe" id="button" /> 
var btn = document.getElementById("button");
btn.addEventListener('click',function(e){
	var target = e.target || e.srcElement;
	console.log(target);
},false);
btn.addEventListener('click',sth,false);     //用addEventListener()指定事件时可以指定多次
//btn.removeEventListener('click',sth,false);//removeEventListener()传入相同的参数可以解除绑定，注意：匿名函数是无法解绑的