jQuery 中使用 bind() 和each() 分配事件处理程序的区别?

2024-04-29

有人可以告诉我使用bind()分配事件处理程序有什么区别吗:

$(function () {
    $('someElement')
        .bind('mouseover', function (e) {
            $(this).css({
                //change color
            });
        })
        .bind('mouseout', function (e) {
            $(this).css({
                //return to previous state

            });
        })
        .bind('click', function (e) {
            $(this).css({
                //do smth.
            });
        })
});

使用each()来完成相同的任务:

$('someElement').each(function () {
    $(this).mouseover(function () {
        $(this).css({/*change color*/ })
            .mouseout(function () {
                $(this).css({/*return to previous state*/ });
            });
    });
});

从您给出的示例中,我认为您实际上是在问使用“绑定”方法和“事件”方法之间有什么区别(如果有的话)。

例如,以下之间有什么区别:

$('.some_element').bind('click',function() { /* do stuff */ });

... 和这个?

$('.some_element').click(function() { /* do stuff */ });

答案是,这确实不重要。这是一个偏好问题。事件方法在语法上更简单,并且涉及更少的输入,但是,据我所知,实际上没有任何区别。我更喜欢使用绑定方法,因为如果您需要将多个事件附加到同一操作,则可以使用速记事件绑定。它还可以让您更轻松地了解何时/是否需要“解除绑定”事件。

看这里:.bind 和其他事件之间的区别 https://stackoverflow.com/questions/562548/jquery-difference-between-bind-and-other-events

但是,从实际的问题来看,“‘each’方法和‘bind’方法有什么区别”……好吧,这是一个完全不同的野兽。

您永远不应该真正使用“each”方法来附加事件,因为“bind”和“event”方法使用much更快的 CSS 选择器引擎(在 jQuery 的例子中,它使用 Sizzle 引擎)。

几乎没有(或从来没有)出现过这样的情况:

$('.some_element').each(function() { $(this).click(function() { /* do something */ }); });

...比这个更好:

$('.some_element').bind('click',function() { /* do stuff */ });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 中使用 bind() 和each() 分配事件处理程序的区别? 的相关文章