前兩節都和addEventListener的click有關，於是在想它與onclick有什麽區別呢，自己調試了一下，網上也有相關資料

事件綁定

onclick綁定方式

優點：
- 簡潔
- 處理事件的this關鍵字指向當前元素
缺點：
- 不能對事件捕獲或事件冒泡進行控制，只能使用事件冒泡，無法切換成事件捕獲
- 一次只能對一個元素綁定一個事件處理程序，當使用window.onload屬性時，會覆蓋采用相同方法所綁定的事件代碼

//this與event查一不大 推薦使用event對象 這樣你總是可以擁有全部的可用信息

dd.onclick = function(event){
    console.log(event.target.innerHTML);
 
//event.target指向的是dd元素，以及他的所有信息
    console.log(this.innerHTML);//this也是指向dd元素，包含他的可用信息
}

//註意：有時也會有需要使用this的情況 
//當需要鼠標移入和移出的時候 event會觸發該事件每一個子元素

dd.onmouseover = function(event) {
    this.style.backgroundColor = "red";//不會改變子元素
    event.target.style.backgroundColor = ‘red‘;//會改變子元素
};
dd.onmouseout 
 
= function(event) {
    this.style.backgroundColor = "green"
    event.target.style.backgroundColor="green"
};

addEventListener綁定方式

優點：
- 可以支持事件處理的捕獲階段，也可以支持時間處理的冒泡階段，兩個階段都是通過addEventListener最後一個參數設置為false(默認值，表示事件冒泡)或者true(表示事件捕獲)來切換
- 事件處理 this與onclick一樣
- 事件處理函數中，event對象總是作為第一個可用參數
- 你可以為某個元素綁定多個事件而不會覆蓋之前綁定的處理程序 （按照順序執行）

dd.addEventListener(‘click‘,function(e){
    console.log(this.innerHTML);
    console.log( e.target.innerHTML );
},false);

demo如下

<input type="button" id="iS_addEventListener" value="addEventListener">
<input type="button" id="iS_onclick" value="onclick">
    <script type="text/javascript">
        (function(){
            document.getElementById("iS_addEventListener").addEventListener("click",function(){
                        alert("我是addEventListener1");
                    },false);
            document.getElementById("iS_addEventListener").addEventListener("click",function(){
                        alert("我是addEventListener2");
                    },false);
            //onclick是重新賦值，變量提升
            document.getElementById("iS_onclick").onclick = function() {
                alert("我是onclick1");
            }
            document.getElementById("iS_onclick").onclick = function() {
                alert("我是onclick2");
            }
        })();
    </script>

結果是onclick只出現一次alert：我是click2【很正常第一次click事件會被第二次所覆蓋】，但是addEventListener卻可以先後運行，不會被覆蓋【正如：它允許給一個事件註冊多個監聽器。在使用DHTML庫或者 Mozilla extensions 這樣需要保證能夠和其他的庫或者差距並存的時候非常有用。】

解除事件綁定

對於onclick，直接 dd.onclick = null;

對於addEventListener則需要，oElement.removeEventListener(sEvent,fnHandler,false);

阻止事件冒泡

e.stopPropagation(); 或 return false;

dd.onclick = function(e){
    console.log(e.target.innerHTML);
    this.style.color = ‘red‘;
    //阻止事件冒泡 
    //防止點擊dd的時候隱藏了父級domClick
    e.stopPropagation();   //或 return false;
}

區別：

return 可以同時阻止冒泡，且阻止事件的默認行為>
[比如a點擊鏈接時跳轉到百度,return false,便會阻止跳轉]

event.stopPropagation();
阻止事件的進一步傳播.(冒泡階段和捕獲階段)

addEventListener的click和onclick的區別