本文為大家詳細分析了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的區別了。