//制作:凌鷹雪影
第一種:button.onclick = Function("alert('hello');");
第二種:button.onclick = function(){alert("hello"); };
第三種:button.onclick = myAlert;
function myAlert(){
alert("hello");
}
第四種:
這種情況更加動態(tài),更為實(shí)用,而且還能添加多個函數(shù)(添加的事件的順序即執(zhí)行順序),呵呵
if(window.addEventListener){ // Mozilla, Netscape, Firefox
//element.addEventListener(type,listener,useCapture);
button.addEventListener('click', alert('11'), false);
button.addEventListener('click', alert('12'), false);//執(zhí)行順序11 -> 12
} else { // IE
button.attachEvent('onclick', function(){alert('21');});
button.attachEvent('onclick', function(){alert('22');});執(zhí)行順序22 -> 21
}
實(shí)例講解:
button.onclick = Function("alert('31');");
button.onclick = Function("alert('32');");
button.onclick = Function("alert('33');"); //如果這樣寫,那么將會只有最后一個方法被執(zhí)行
button.attachEvent("onclick", function(){alert('41');});
button.attachEvent("onclick", function(){alert('42');});
button.attachEvent("onclick", function(){alert('43');}); //如果這樣寫,三個方法都會被執(zhí)行
//當(dāng)然,你也可以這樣寫
button.onclick = Function("alert('51');");
button.attachEvent("onclick", function(){alert('52');});
//對應(yīng)移除事件
detachEvent('onclick',func); removeEventListener('click',func);
附:事件模型處理順序(addEventListener中第三個參數(shù)useCapture的含義)
DOM模型在遇到事件(Event)時,處理的順序有兩種分別,以下圖為例:
如果使用者在[物件一]上點(diǎn)擊鼠標(biāo)左鍵,[物件二]同樣也會受到同一個Click事件,但是到底是[物件一]先受到還是[物件二]先收到,在每家瀏覽器上的實(shí)做是有所不同的,不過W3C的DOM模型為了相容性考量,將兩種順序都予以實(shí)做出來。
如果是[物件一]先接受到事件,接下來才是[物件二]的話,我們稱這樣的事件處理為Event Bubbing,IE是以此模式實(shí)做的。
如果觸發(fā)的事件順序是相反的,由[物件二]先接收到事件,最后才是[物件一]的話,我們稱之為Event capturing。
W3C的DOM模型則是兩者都采用,不過會先以Event capturing的順序能過一次所有物件的事件處理函數(shù)之后,才再以Event Bubbing的順序跑一次。
在JavaScript中有addEventListener()函數(shù)可以注冊事件的處理函數(shù),Prototype.js所實(shí)做的observe()函數(shù)也是透過addEventListener()所實(shí)現(xiàn)的,這個函數(shù)最后一個參數(shù)也就是useCapture,他的值必須是bool形態(tài)的,true代表該處理函數(shù)要在capturing的順序中被觸發(fā),false則將代表要在bubbing的順序中被觸發(fā),如果還不清楚的話,通常建議將這個參數(shù)的值設(shè)置為false,這并不是說對我們的程序代碼有所影響,所注冊的事件處理函數(shù)還是會被觸發(fā)。