共有2488人关注过本帖树形打印

主题:JavaScript框架hover事件处理

帅哥哟,离线,有人找我吗?
gaofeng
  1楼 个性首页 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:管理员 帖子:3510 积分:11230 威望:5 精华:7 注册:2000-5-19 10:19:38
JavaScript框架hover事件处理  发帖心情 Post By:2013-11-25 15:47:48

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


支持(0中立(0反对(0回到顶部