JavaScript框架hover事件处理

每个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事件调用。该函数根据元素是

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!