每個JavaScript框架都實作跨瀏覽器的事件處理，鼓勵你擺脫舊式的內嵌附加事件而使用精簡的線性方法。看看清單6的jQuery例子，使用hover事件高亮顯示div元素。
清單6：使用jQuery附加hover事件
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
這是jQuery的一個特殊事件，你會發現它提供了兩個函數。第一個在onMouseOver事件觸發時調用，第二個函數在onMouseOut事件觸發時調用。這是因為hover沒有標準的DOM事件。讓我們來看看更典型的事件，如click（瞧清單7）：
清單7：使用jQuery附加click事件
$('#the-button').click(function() {
alert('You pushed the button!');
});
正如你看到的那樣，實例中只有一個函數參數。 jQuery中大多數事件都以相同的方式處理，在jQuery中使用事件處理程序，上下文指的是觸發事件的哪個物件。有些框架並不以這種方式運作，拿Prototype來說，清單7中的程式碼看起來就像清單8中的那樣。
清單8：使用Prototype附加click事件
$('the-button').observe('click', function(e) {
alert('You pushed the button!');
});
你首先會注意到，沒有click函數，而是一個observe函數，它在引用自身之前接受一個事件參數。您還會注意到該函數接受一個參數e，這裡的上下文指的是觸發事件的元素。看看它如何運作，讓我們用Prototype重寫清單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也不同，你只需要使用$函數得到上下文變量，Prototype函式庫則使用Event.element() 函式。此外，你注意到你需要將mouseover和mouseout 事件分開。
透過該文章的一些教程，你可以看到函數以內聯的方式創建，並不命名。這意味著它不能重複使用，Prototype的懸停範例也給了我們一個如何使用命名函數的機會。清單10說明了這個方法。
清單10：使用Prototype改進懸停事件
您會注意到，此時你只需定義一個函數。它同時被mouseover和mouseout事件呼叫。該函數根據元素是否有“highlight”的類別名，並基於結果添加或刪除之。你也會注意到，參數e隱式傳遞。換句話說，你給observe函數傳遞了一個不明確的參數。
轉載網址： http://www.denisdeng.com/?p=720
原文網址： http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
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);