事件是 javascript 最核心的概念之一，一切的行为都基于事件而产生
目录
先上代码，再分析
var EventUtil = {
// 1 注册事件
addHandler: function(element, type, handler) {
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
},
// 2.移出事件
removeHandler: function(element, type, handler) {
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
},
// 3.兼容获取event对象
getEvent: function(event){
return event ? event : window.event;
},
// 4.获取目标target
getTarget: function(event) {
return event.target || event.srcElement;
},
// 5.阻止默认事件
preventDafult: function(event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
// 6.阻止冒泡
stopPropagation: function(event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
一、事件流
事件冒泡：IE事件流叫做事件冒泡,即事件开始时由最具体元素接收，然后逐级向上传播到较为不具体的节点(div(假设div为具体节点) -> body -> html -> document)。
事件捕获：Netscape团队提出了另一种事件流叫做事件捕获,即事件开始由不太具体的节点先接收然后到具体的某个节点再接收(document -> html -> body -> div(假设div为具体节点))。
DOM2级事件 规定事件流包括三个阶段 事件捕获、处理目标、事件冒泡
二、事件处理程序
DOM0级事件
定义：通过为事件处理程序赋值的方式为DOM0级事件
var btn = document.getElementById('btn');
btn.onclick = function () {
console.log('clicked');
}
DOM2级事件
“DOM2级事件”定义了两个方法，用于指定和删除事件处理程序的操作：addEventListener(type, handler, false), removeEventListener(type, handler, false);第三个参数true为事件捕获，false为事件冒泡
IE事件处理程序提供了两个对应的方法：attachEvent(type, handler)、detachEvent(type, handler)
三、 事件对象
1) DOM中的事件对象
概念：在触发DOM上的某个事件时，会产生一个事件对象event，这个event上面包含了所有与事件有关的信息(事件元素、事件类型、特定事件属性)。event对象包含与创建它的特定事件有关的属性和方法。
DOM DOM0 获取event: event
DOM DOM2 获取event: event
属性和方法：
方法：
preventDefault() [Function]: 取消默认行为。若cancelable是true，则可以使用这个方法
stopPropagation() [Function]: 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
stopImmediatePropagation() [Function]: 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
属性：
cancelable [Boolean]: 是否可以取消事件的默认行为
bubbles [Boolean]: 事件是否冒泡
defaultPrevented [Boolean]: 为true表示已经调用了preventDefault()
detail [Integer]: 与事件相关的细节信息
eventPhase [Integer]: 调用事件处理程序的阶段 1.捕获 2.目标 3.冒泡
target [Element]：事件流的目标阶段
currentTarget [Element]：在事件流的捕获/目标/冒泡阶段
注：
a.只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）
EventUtil.addHandler(div, 'click', function(event){
alert(event.bubbles); // true
alert(event.cancelable); // true
console.log(event.target);
console.log(event.currentTarget);
});
b.stopImmediatePropagation: 如果某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止
EventUtil.addHandler(btn, 'click', function(event){
alert("1.我是p元素上被绑定的第一个监听函数");
});
EventUtil.addHandler(btn, 'click', function(event){
event.stopImmediatePropagation();
//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
});
EventUtil.addHandler(btn, 'click', function(event){
alert("2.我是p元素上被绑定的第二个监听函数");
});
EventUtil.addHandler(div, 'click', function(event){
alert("3.我是div元素,我是p元素的上层元素");
});
// 没有调用 stopImmediatePropagation 输出：1.xxx 2.xxx 3.xxx
// 调用 stopImmediatePropagation 输出：1.xxx
2) IE中的事件对象
概念：与访问DOM中的event对象不同，要访问IE中的事件对象有几种不同的方式，取决于指定事件处理程序的方法。
IE DOM0 获取event: window.event
IE DOM2 获取event: event
属性:
cancelBubble [Boolean] 默认值为false，true为阻止冒泡 [同stopPropagation()]
returnValue [Boolean] 默认为true, false为阻止默认事件[同 preventDefault()]
srcElement [Element] 事件的目标 [同 target]
type [String] 被触发的事件类型
四、事件类型
UI事件：当用户于页面上的元素发生交互时触发
UI事件是指不一定与用户操作有关的事件
DOMActivate[舍弃]：表示元素已经被用户操作激活
load: 当页面完全加在后在window上面触发
unload: 当页面完全卸载后在window上面触发
abort: 用户停止下载过程
error: 当发生javascript错误时在window上触发
select: 当用户选择一个或多个字符时触发
resize: 窗口大小改变的时候触发
scroll: 当用户滚动带滚动条的元素中的内容时触发
焦点事件：当元素获得或失去焦点时触发
焦点事件在页面获取或失去焦点的时候触发,可以与document.hasFocus()、document.activeElement()属性配合，可以知晓用户在页面上的行为
blur: 元素失焦时触发，[不冒泡]
focus: 元素获取焦点时触发 [不冒泡]
DOMFocusOut: 元素失焦时触发，[冒泡]
DOMFocusIn: 元素获取焦点时触发 [冒泡]
focusin: 元素获取焦点时触发 [冒泡]
focusout: 元素失焦时触发 [冒泡]
鼠标事件：鼠标在页面上操作的时候触发
鼠标事件是web应用中最常用的事件
mousedown: 按下任意鼠标按钮
mouseup: 释放鼠标
click : 点击或回车
dbclick: 双击
mouseenter: 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件[不冒泡]
mouseover: 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
mouseleave: 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。[不冒泡]
mouseout: 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mousemove: 鼠标在目标区域移动时重复的触发
注意：mouseover ,mouseout当鼠标指针穿过被选元素子元素时，也会触发事件。这在绑定事件时，有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的
滚动事件：当鼠标滚动时触发
文本事件：当在文档中输入文本时触发
键盘事件：当用户通过键盘操作页面时触发
合成事件：当为IME输入字符时触发
变动：当底层DOM结构发生变化时触发
变动名称事件：当元素或属性名变动时触发[舍弃]