代碼：
前期肯定是有預編譯期和執行期，這些先不討論了就，主要說的是這段代碼的執行流程
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：以上都是自己總結的，肯定漏洞百出，有興趣的可以討論一下啊
