javascript事件

事件的本质是程序各组成之间的一种通讯方式，也是异步编程的一种实现。
----摘自JavaScript标准参考教程

1.EventTarget接口

EventTarget是接收事件监听跟出发的接口。所有的节点对象都会有这个接口。
该接口提供三个实例方法。

 addEventListener:绑定监听事件
 removeEventListener:移除监听事件
 dispatchEvent：触发事件

1.1 EventTarget.addEventListener()

   EventTarget.addEventListener()用于实现为节点或者对象绑定一个监听事件，一个对象或者节点可以绑定多个监听事件，但若每个监听事件的监听函数是同一个的话就只会执行一次，其他函数会自动被移除。

该方法接受三个参数。

target.addEventListener(type,listener[,userCapture]);

type:事件(如：click,focus)的名称，大小写敏感。
listener:监听函数（函数名）。事件发生时，就会执行此函数。
useCapture:布尔指，表示监听函数是否在捕获阶段触发，默认值：false（函数只在冒泡时触发）

example 1：

oDiv=document.querySelector('.div1'); 
function eventFun(){ 
   console.log('监听事件') 
} 
oDiv.addEventListener('click',eventFun,false);

关于参数还有另外两个情况
1.第二个参数除了监听函数，还可以是具有handleEvent方法的对象
example 2:

oDiv.addEventListener('click',
{ handleEvent:function(){
console.log('handleEvent方法');
}
});

2.第三个参数除了布尔值useCapture，还可以是一个属性配置对象。该对象有下列属性

• capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
• once： 布尔值，表示监听函数只触发一次，然后自动移除。
• passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器会自动忽略这个要求，并在控制台输出一行警告。

1.2 EventTarget.removeEventListener()
该方法主要用于移除addEventListener添加的事件监听函数。该方法没有返回值。用法与addEventListener()方法完全一值。

1.3 EventTarget.dispatchEvent()
EventTarget.dispatchEvent()方法在当前节点上出发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要一个监听函数调用了Event.preventDefault()，则返回false，否则返回true。

 EventTarget.dispatchEvent(event)  
   

example 3:

oDiv.addEventListener('click',eventFun,false);
var event = new Event('click);
oDiv.dispatchEvent(event);//自动执行click事件。

2.监听函数

浏览器的事件模型就是通过监听函数来对事件作出反应的，浏览器监听到这个事件就会执行对应的监听函数。
javascript中有三种方法可以为事件绑定监听函数

2.1 html的on-属性(事件名)

 <div class="addPanel" onclick="doFun()"></div>
 //这样绑定的是函数名+(),这样当事件发生时就会立即执行函数
 

2.2元素节点的事件属性

div.onclick=function(){
  console.log('节点事件')
}

2.3 EventTarget.addEventListener()
使用方法同第一小节

2.4 总结
第一种方法违反了html与javascriot代码分离的原则，不利于代码分工，不推荐使用。
第二种方法，同一个事件只能定义一个监听函数。如果定义多次，后一次会把前面的覆盖掉。不推荐使用。
第三种是比较推荐且官方指定的监听函数方法，原因如下：

1.同一个事件可以添加多个监听函数。
2.能够指定在哪个阶段触发监听函数。
3.除了DOM节点，其他对象(比如：window,XMLHttpRequest等)也有这个接口，它等于是整个javascript统一的监听函数接口。