每個(gè)JavaScript框架都實(shí)現(xiàn)跨瀏覽器的事件處理,鼓勵(lì)你擺脫舊式的內(nèi)聯(lián)附加事件而使用精簡(jiǎn)的線(xiàn)性方法。看看清單6的jQuery例子,使用hover事件高亮顯示div元素。
清單6:使用jQuery附加hover事件
$('#the-box').hover(function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); });
這是jQuery的一個(gè)特殊事件,你會(huì)發(fā)現(xiàn)它提供了兩個(gè)函數(shù)。第一個(gè)在onMouseOver事件觸發(fā)時(shí)調(diào)用,第二個(gè)函數(shù)在onMouseOut事件觸發(fā)時(shí)調(diào)用。這是因?yàn)閔over沒(méi)有標(biāo)準(zhǔn)的DOM事件。讓我們看看更為典型的事件,如click(瞧瞧清單7):
清單7:使用jQuery附加click事件
$('#the-button').click(function() { alert('You pushed the button!'); });
正如你看到的那樣,實(shí)例中只有一個(gè)函數(shù)參數(shù)。jQuery中大多數(shù)事件均采用同樣的方式處理,在jQuery中使用事件處理程序,上下文指的是觸發(fā)事件的哪個(gè)對(duì)象。一些框架并不以這種方式工作,拿Prototype來(lái)說(shuō),清單7中的代碼看起來(lái)就像清單8中的那樣。
清單8:使用Prototype附加click事件
$('the-button').observe('click', function(e) { alert('You pushed the button!'); });
你首先會(huì)注意到,沒(méi)有click函數(shù),而是一個(gè)observe函數(shù),它在引用自身之前接受一個(gè)事件參數(shù)。您還會(huì)注意到該函數(shù)接受一個(gè)參數(shù)e,這里的上下文指的是觸發(fā)事件的元素??纯此绾喂ぷ?,讓我們用Prototype重寫(xiě)清單6中的代碼(看清單9)。
清單9:使用Prototype附加懸停事件
$('the-box').observe('mouseover', function(e) { var el = Event.element(e); el.addClassName('highlight'); }); $('the-box').observe('mouseout', function(e) { var el = Event.element(e); el.removeClassName('highlight'); });
jQuery也不同,你只需要使用$函數(shù)得到上下文變量,Prototype庫(kù)則使用Event.element() 函數(shù)。此外,你注意到你需要將mouseover和mouseout 事件分開(kāi)。
通過(guò)該文章的一些教程,你可以看到函數(shù)以?xún)?nèi)聯(lián)的方式創(chuàng)建,并不命名。這意味著它不能重復(fù)使用,Prototype的懸停示例也給了我們一個(gè)如何使用命名函數(shù)的機(jī)會(huì)。清單10說(shuō)明了這個(gè)方法。
清單10:使用Prototype改進(jìn)懸停事件
您會(huì)注意到,此時(shí)你只需定義一個(gè)函數(shù)。它同時(shí)被mouseover和mouseout事件調(diào)用。該函數(shù)根據(jù)元素是否有“highlight”的類(lèi)名,并基于結(jié)果添加或刪除之。你也會(huì)注意到,參數(shù)e隱式傳遞。換句話(huà)說(shuō),你給observe函數(shù)傳遞了一個(gè)不明確的參數(shù)。
function toggleClass(e) { var el = Event.element(e); if(el.hasClassName('highlight')) row.removeClassName('highlight'); else row.addClassName('highlight'); }
$('the-box').observe('mouseover', toggleClass); $('the-box').observe('mouseout', toggleClass);