事件
1:事件流
事件流描述的是從頁面中接收事件的順序。IE是事件冒泡( 從下往上一層一層的往上傳)，其他的為事件捕獲(從
docunment一層一層的往下捕獲).事件處理程序,
onclick,onload,onmouseover,每個都會創(chuàng)建一個封裝元素屬性值的函數(shù)喜德，函數(shù)中有一個局部變量event动分，為事件對象.
DOM0級對事件的處理
一:簡單 二:具有跨瀏覽器的優(yōu)勢必逆。
btn.onclick = function(){};被認(rèn)為是該元素的方法,可以用方法中用this操作元素, 取消btn.onclick=null缺點,后面定義的
onclick()會把前面的覆蓋
DOM2級事件處理程序
addEventListener(),removeEventListener(),接收三個參數(shù),1:要處理的事件名,2:作為事件處理程序的函數(shù)3: 布爾值.(true為表示事件在捕獲階段調(diào)用事件處理程序,false為在事件冒泡階段調(diào)用事件處理程序)好處:可以添加多個事件處理程序,觸發(fā)順序按照添加的順序觸發(fā).
通過
addEventListen()添加的事件處理程序只能用removeEventListener()移除,移除時傳入的參數(shù)必須和處理傳入的參數(shù)必須一致.這就意味著通過addEventListener()添加的匿名函數(shù)將無法移除.必須要var btn = document.getElementById("myBtn"); var handle = function(){alert(this.id)}; btn.addEventListener("click",handle,false); //移除 和添加方法的參數(shù)一樣 btn.removeEventListener("click",handle,false)
IE事件處理程序
IE實現(xiàn)了和
DOM類似的兩個方法,attachEvent()和detachEvent()，這兩個方法只接受兩個相同的參數(shù),事件處理程序名稱和事件處理函數(shù).由于IE8只支持事件冒泡,通過attachEvent添加的事件只會添加到冒泡階段乌昔。注意添加的是onclick不是上面的click.當(dāng)調(diào)用detachEvent()時，必須像removeEventListener()一樣傳入的參數(shù)一樣壤追，意味著匿名函數(shù)不能被移除磕道。添加多個方法的時候,執(zhí)行順序按添加相反的順序觸發(fā)var btn =document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert(this === window); //true })
事件對象
在觸發(fā)
DOM事件時,都會產(chǎn)生一個event阻止特定事件的默認(rèn)行為.用
preventDefault(). 例如阻止<a></a>的跳轉(zhuǎn)。
var link=document.getElemetById("myLink");
link.onclick=function(event){event.preventDefault()}//只有cancelable屬性為true的才能用preventDefault也可以return false;來阻止
event.stopPropagation()用于立即停止事件在DOM層次中的傳播,取消進(jìn)一步的事件捕獲或捕獲.從而避免觸發(fā)不相干的的事件綁定.注意cancelBubble屬性 也可以阻止事件捕獲.IE為事件冒泡.event.stopPropagation()都可以阻止行冰。總的來說
event.preventDefault();event.stopPropagation()來阻止溺蕉。
