EventTarget接口
addEventListener()
addEventListener方法用于在当前节点或对象上，定义一个特定事件的监听函数。
// 使用格式
target.addEventListener(type, listener[, useCapture]);
// 实例
window.addEventListener('load', function () {...}, false);
request.addEventListener('readystatechange', function () {...}, false);
addEventListener方法接受三个参数。
type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。老式浏览器规定该参数必写，较新版本的浏览器允许该参数可选。为了保持兼容，建议总是写上该参数。
下面是一个例子。
function hello() {
console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello, false);
上面代码中，addEventListener方法为button元素节点，绑定click事件的监听函数hello，该函数只在冒泡阶段触发。
removeEventListener()
removeEventListener方法用来移除addEventListener方法添加的事件监听函数。
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);
removeEventListener方法的参数，与addEventListener方法完全一致。它的第一个参数“事件类型”，大小写敏感。
dispatchEvent()
dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。
target.dispatchEvent(event)
dispatchEvent方法的参数是一个Event对象的实例。
para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);
上面代码在当前节点触发了click事件。
监听函数
监听函数（listener）是事件发生时，程序所要执行的函数。
HTML标签的on-属性
HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。
<body onload="doSomething()">
<div onclick="console.log('触发事件')">
上面代码为body节点的load事件、div节点的click事件，指定了监听函数。
使用这个方法指定的监听函数，只会在冒泡阶段触发。
Element节点的事件属性
Element节点对象有事件属性，同样可以指定监听函数。
window.onload = doSomething;
div.onclick = function(event){
console.log('触发事件');
};
使用这个方法指定的监听函数，只会在冒泡阶段触发
addEventListener方法
通过Element节点、document节点、window对象的addEventListener方法，也可以定义事件的监听函数。
window.addEventListener('load', doSomething, false);
Event对象
Event构造函数接受两个参数。第一个参数是字符串，表示事件的名称；第二个参数是一个对象，表示事件对象的配置。该参数可以有以下两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消。
var ev = new Event(
'look',
{
'bubbles': true,
'cancelable': false
}
);
document.dispatchEvent(ev);
上面代码新建一个look事件实例，然后使用dispatchEvent方法触发该事件。
事件种类
鼠标事件
click 事件，dblclick 事件
当用户在Element节点、document节点、window对象上单击鼠标（或者按下回车键）时，click事件触发。
mouseup 事件，mousedown 事件，mousemove 事件
mouseup事件在释放按下的鼠标键时触发。
mousedown事件在按下鼠标键时触发。
mousemove事件当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次代码。
mouseover 事件，mouseenter 事件
mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。
两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
contextmenu 事件
contextmenu事件在一个节点上点击鼠标右键时触发，或者按下“上下文菜单”键时触发。
MouseEvent 对象
浙公网安备 33010602011771号