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物件總是作為第一個可用引數
- 你可以為某個元素繫結多個事件而不會覆蓋之前繫結的處理程式 （按照順序執行）
缺點：
- IE8以下不支援

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

解除事件繫結

對於onclick

dd.onclick = null;

對於addEventListener

function clickShow(){
    console.log( 'clickShow' );
}

function removeShow(){
    console.log( 'removeShow' );
    dd.removeEventListener('click',clickShow,false/true);
}
dd.addEventListener('click',clickShow,flase/true);//當第三個引數flase/true存在的時候 那麼移除的時候也應該帶有第三個引數,如果沒有可以不帶

cc.addEventListener('click',removeShow)

阻止事件冒泡e.stopPropagation();

dd.onclick = function(e){
    console.log(e.target.innerHTML);
    this.style.color = 'red';
    //阻止事件冒泡 
    //防止點選dd的時候隱藏了父級domClick
    e.stopPropagation();
}
domClick.addEventListener('click',function(e){
    this.style.visibility = 'hidden';
})

遮蔽瀏覽去的預設行為 e.preventDefult();return false;

參考書籍：《精通javascript》（第二版）第六章