onclick():1.這種寫法是DOM0級規(guī)范的寫法悔耘;2.是所有的瀏覽器支持的暇矫;3.這種寫法不能同時綁定多個事件鄙才、使代碼耦合在了一起颂鸿。
addEventListener() :1.是DOM2標準中定義的方法;2.可支持同時綁定多個事件攒庵;3.它可以控制是在事件捕獲階段或者是在冒泡階段調用事件處理程序嘴纺。4.既然這個是DOM2標準中定義的,那么只有支持DOM2級事件處理程序的瀏覽器才支持這個方法(IE9,Firefox,Safari,Chrome和Opera支持)
事件捕獲:事件捕獲會從document開始觸發(fā)浓冒,一級一級往下傳遞栽渴,依次觸發(fā),直到真正事件目標為止稳懒。
事件冒泡:事件冒泡會從當前觸發(fā)的事件目標一級一級往上傳遞闲擦,依次觸發(fā),直到document為止。
看例子:
addEventListenert() 第一個參數(shù)填寫事件名墅冷,第二個參數(shù)是一個函數(shù)纯路,第三個參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序。true代表捕獲階段處理寞忿, false代表冒泡階段處理,不寫第三個參數(shù)默認false
運行結果是第二個onclick把第一個onclick給覆蓋了驰唬,雖然大部分情況用on就可以完成想要的結果,但是有時又需要執(zhí)行多個相同的事件腔彰,很明顯如果用on不能完成