本文為大家詳細分析了JS綁定事件，供大家參考，具體內容如下
綁定事件有相容性問題，在IE早期版本中使用的是obj.attachEvent()，而其他瀏覽器使用的則是addEventListener()。
這兩個方法都有三個參數，分別為：事件類型，事件函數，最後一個是布林值，true或是false。
true表示在事件擷取階段執行，false表示在事件冒泡階段執行。
由於IE只支援事件冒泡，所以同大多數情況下，都是將事件處理程序加入事件流的冒泡階段，即預設為”false”
這樣可以最大限度地相容於各種瀏覽器。 最好只在需要在是事件到達目標之前截獲它的時候將事件處理程序新增至擷取階段。 如果不是特別需要，不建議在事件擷取階段註冊事件處理程序。
相容於各瀏覽器的事件綁定：
function addEvent(obj, eventType, callback, bubble){
if(obj.addEventListener){
obj.addEventListener(eventType, callback, bubble);
}else{
obj.attachEvent(eventType, callback, bubble);
}
}
登入後複製
呼叫時，注意callback函數不需要加括號，與setTimeout類似。
這部分都比較容易理解，對於最後一個參數，相信很多人並不是非常理解，總之我還是需要寫程式測試一下才真正弄通。
HTML部分內容：
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="">
<title>Document</title>
<!--css js 文件的引入-->
</head>
<body>
<div id="out">
<p>我是路人甲</p>
<div id="middle">
<div id="inner">最里面的</div>
</div>
<p>我是路人乙</p>
</div>
</body>
</html>
登入後複製
js內容：(第一種情況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：inner-------middle------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
登入後複製
js內容：(第二種情況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
登入後複製
js內容：(第三種情況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
登入後複製
js內容：(第四種情況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------middle------inner
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
登入後複製
js內容：(第五種情況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：middle-------inner------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
登入後複製
js內容：(第六種情況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------inner------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
登入後複製
看完以上六種情況對應的結果，相信您已經能夠深刻理解，最後一個參數為true或false的區別了。
