代码：
前期肯定是有预编译期和执行期，这些先不讨论了就，主要说的是这段代码的执行流程
1.是页面加载完成后获取box对象，然后执行函数调用addEvent函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box" id="aa">123aaaaaasdasdsadsadsadsadsadassssssssssssssssdasdasdasdasdasdddddddddddddd
<div id="ee">444<div id="tt">555</div></div></div>
<script src="js/common.js"></script>
</body>
</html>window.onload = function(){
var box = document.getElementById('aa');
addEvent(box,'click',function(){
alert('ysx');
});
addEvent(box,'click',toBlue);
}
function toBlue(){
this.className = 'pox';
addEvent(this,'click',toRed);
}
function toRed(){
this.className = 'box';
addEvent(this,'click',toBlue);
}
function addEvent(obj,type,fn){
var saved = null;
if(typeof obj['on'+type] == 'function')saved = obj['on'+type];
obj['on'+type] = function(){
if(saved)saved();
fn.call(this);
}
}前期肯定是有预编译期和执行期，这些先不讨论了就，主要说的是这段代码的执行流程
1.是页面加载完成后获取box对象，然后执行函数调用addEvent函数
2.进入addEvent函数，顺序执行，直到遇到一个点击事件后，此时异步执行开始，function(){if(saved)saved();fn.call(this);}这段函数是异步去执行，并且把执行后的结果存在消息队列中，等待主进程来获取消息
3.主进程继续执行下一个addEvent函数调用，然后重复步骤2，因为是同一元素的同一事件，所以在消息队列中只会存在一个事件消息，可以想象成指针（每次让onclick指向堆内存中不同的函数，最后肯定只会执行第一个，但是如果你把对内存中的每个函数都记住自己的上一个，也就是saved指针的功能，相当于一个链表，这样就可以从最早的那个执行了，不会被覆盖）
4.主进程全部执行完成后，等待点击事件发生后，开始在消息队列中获取消息
PS：以上都是自己总结的，肯定漏洞百出，有兴趣的可以讨论一下啊
