1、事件冒泡
IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点。
2、事件捕获
事件捕获是由最不具体的节点开始接收，逐级向下传播到较具体的节点
3.事件流
“DOM2级事件”规定的事件流包括三个阶段： 事件捕获阶段、处于目标阶段和事件冒泡阶段。
4、事件委托
前戏：每一个函数都是对象，对象越多，占用的内存越多，性能越差
对于“事件处理程序过多”问题的解决方案就是事件委托，事件委托利用了事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。
自行封装EventUtil函数
var EventUtil = {
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;
}
},
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] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubbles = true;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarger) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else { return null; }
}
};
委托事件实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="myLinks">
<li id="doSomething">do something</li>
<li id="baidu">打开百度</li>
<li id="hello"> hello</li>
</ul>
</body>
<script>
var EventUtil = {...};
var list = document.getElementById('myLinks');
EventUtil.addHandler(list, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (target.id) {
case "doSomething":
document.title = "i changed the document";
break;
case "baidu":
location.href = 'https://www.baidu.com';
break;
case "hello":
alert("hello");
break;
}
})
</script>
</html>
最适合事件委托技术的事件包括click,mousedown,mouseup,keydown,keyup,keypress。