JavaScript框架比較:事件處理 - 建站學院 - 源碼網

JavaScript框架比較:事件處理(2010-04-28)

每個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);

上一篇:C#用自定義或指定顏色填充矩形

下一篇:利用路徑及圖層樣式制作飛濺的牛奶

關于本站  |  版權聲明 | 合作聯系 | 網站地圖 | 幫助中心 |  | XHTML/CSS
Copyright © 2004-2010 downcodes.com 程序支持:木翼 冀ICP備05003145號
本站誠招服務器贊助商
贵州11选5漏选情况 比较好的网赚论坛 捕鱼游戏注册送10元 股票操作软件 下载哈灵浙江麻将 幸运农场综合走势图 信誉捕鱼棋牌游戏平台 乐乐安徽安庆麻将群 pk10登录平台 网赚群 熊猫四川麻将技巧漏