译文:JavaScript框架比较–事件处理(五)
来源:互联网 发布:网页文字抓取软件 编辑:程序博客网 时间:2024/05/21 09:01
事件处理
每个JavaScript框架都实现跨浏览器的事件处理,鼓励你摆脱旧式的内联附加事件而使用精简的线性方法。看看清单6的jQuery例子,使用hover事件高亮显示div元素。
清单6:使用jQuery附加hover事件
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
这是jQuery的一个特殊事件,你会发现它提供了两个函数。第一个在><事件触发时调用,第二个函数在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
- 译文:JavaScript框架比较–事件处理(五)
- 译文:JavaScript框架比较–框架比较(八)
- 译文:JavaScript框架比较–选择器(一)
- 译文:JavaScript框架比较–DOM遍历(二)
- 译文:JavaScript框架比较–DOM操作(三)
- 译文:JavaScript框架比较–实用函数(四)
- 译文:JavaScript框架比较--Ajax(六)
- 译文:JavaScript框架比较--提升用户体验(七)
- javascript参考教程(五)事件处理
- JavaScript 框架(比较)
- JavaScript系列(五:事件)
- Qt事件处理(五)
- Qt事件处理(五)
- JavaScript框架比较–Ajax
- javascript框架比较(一)
- javascript框架比较(二)
- javascript框架比较(三)
- javascript框架比较(四)
- 放飞风筝 放飞梦想
- 译文:JavaScript框架比较–实用函数(四)
- .Net socket编程-传输文本文件
- 推荐清华大学王仙茅同学参加2010广州亚运会注册大学生记者选拔
- JAVA实现web登陆
- 译文:JavaScript框架比较–事件处理(五)
- extern用法详解
- 译文:JavaScript框架比较--Ajax(六)
- ubuntu 8.04 编译安装 php mysql apache
- 安装
- xml 和 Java Annotation 的优缺点对比
- 进水失灵键盘维修
- 关于_BLOCK_TYPE_IS_VALID_
- 译文:JavaScript框架比较--提升用户体验(七)