"on"与仅使用"悬停"之间的区别

Question

有人可以向我解释为什么这段代码有效:

$(".landing-story").hover(function(){
            $(this).find(".cover").slideToggle();
        });

这段代码不起作用:

$(".landing-story").on("hover",function(){
            $(this).find(".cover").slideToggle();
        });

谢谢

Answer 1

没有实际"hover"事件 - .hover()是添加mouseenter和(可选)mouseleave处理程序的简写功能.此代码应该像您期望的那样工作:

$(".landing-story").on("mouseenter",function(){
    $(this).find(".cover").slideToggle();
});

编辑:正如Kevin Panko指出的那样,.hover()将始终分配a mouseenter和mouseleave事件处理程序,它们可以是相同的函数,也可以是两个不同的函数,具体取决于它是通过一个还是两个函数.

为了挑剔 - `.hover()`实际上一直处理'mouseenter`和`mouseleave`.*可选*部分是您可以提供一个功能来处理两个或两个单独的功能. (3认同)
@Richard在可能的情况下应该避免使用`.on()`函数,因为它只是无缘无故地打字. (2认同)
@Richard您可能想要评论一下不使用`on()`.使用`on()`是一种与其他事件处理函数不同的范例,并提供非常强大(且易于滥用)的功能.例如,如果你想为DOM中尚不存在的元素附加事件处理程序(例如它们是动态添加的),你必须使用`on()`(或者在它们有之后专门为这些元素添加事件处理程序)已被添加).但是,您应该在使用前务必阅读文档并完全理解事件委托. (2认同)