译文：JavaScript框架较量–变乱处理赏罚（五）

每个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改造悬停变乱

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);
您会留意到，此时你只需界说一个函数。它同时被mouseover和mouseout变乱挪用。该函数按照元素是否有“highlight”的类名，并基于功效添加或删除之。你也会留意到，参数e隐式转达。换句话说，你给observe函数转达了一个不明晰的参数。

转载地点：http://www.denisdeng.com/?p=720

原文地点：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!