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统一的监听函数接口。