事件处理程序也叫事件侦听器,什么是事件处理程序？那首先，什么是事件？事件就是用户或者浏览器自身执行的某种动作，如：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()传入相同的参数可以解除绑定，注意：匿名函数是无法解绑的
