事件处理程序也叫事件侦听器,什么是事件处理程序?那首先,什么是事件?事件就是用户或者浏览器自身执行的某种动作,如:click、load等都是事件的名字。而响应时间的函数就叫做事件处理程序,如:onclick,onload
添加事件处理程序的方法
为元素添加事件处理程序有多种方法:
一、在元素上添加,如:
<input type="button" value="clickMe" onclick="alert(value)"/> //这里用的是value而不是this.value,当然用this.value也是可以的,this指的是目标元素本身
这种方法的优点
在于他拓展作用域的方式,在函数内部可以直接访问document以及元素本身的属性。如下代码,点击按钮会弹出输入框中的值:
<form>
<input type="text" name="userName"/>
<input type="button" value="userName's value" onclick="alert(userName.value)"/>
</form>
缺点
在于:
1、会有时差问题,因为很多时候侦听器要处理的并不是简单的一个语句,而是一个功能,如果点击时页面还没有加载完成点击时要执行的函数,那么就会报错。这样我们可以把他邓庄到一个try-catch块中来捕捉错误,如:
<input type="button" value="userName's value" onclick="try{sth();}catch(ex){}"/>
2、可能会有兼容问题
3、html与javascript紧密耦合,不利于维护。
二、为元素指定事件处理程序:
<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,除非特别需要,因为会有兼容问题
<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()传入相同的参数可以解除绑定,注意:匿名函数是无法解绑的