Question

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            //$(this).clone().appendTo('div');
            $(this).clone().prependTo('div');
        })

        $('button').bind('click', function(){
            $(this).clone().appendTo('div');
        })
    });
</script>
</head>
<body>
    <h1> My WebSite</h1>
    <div>
        <button data-file="day">Day</button>
        <button data-file="night">Night</button>
    </div>
</body>
</html>

当我运行代码时，我发现这两者之间没有任何区别，因为它将元素克隆到我的div标签。绑定方法有什么特别之处？

http://api.jquery.com/category/events/

我正在查看文档，如果我错了就纠正我...如果click和bind做同样的事情，为什么他们有两种不同的方法来实现相同的目标？。

Answer 1

您的示例运行完全相同的代码 - click是一个快捷方式处理程序。请注意，on现在是通过bind附加事件的首选方法。

使用on（以及之前版本bind）的最常见原因是它允许您连接自定义事件：

$('.foo').trigger('someEvent.myPlugin');

// in another file, far far away
$('.foo').on('someEvent', function() {
    // deal with someEvent on foo
});

最常见的是，您可以使用click，change等实用程序。

Answer 2

他们之间没有区别

jQuery提供了一些实用程序函数，如click()，change()等来注册常见事件的处理程序，它们在内部使用bind()和on()等函数 - 新版本

Answer 3

绑定是通用的，低级功能。 Click是一种快捷方法，是Bind的更高级别实现。另外，bind应该或多或少地被弃用，你应该使用“on”绑定。即。

$('selector'.on("click", function () {

});

使用“on”绑定的原因是您可以选择利用事件委派。因为你也可以这样做

$('ul'.on("click", "li", function () {
   //do something whenever one of the list items is clicked
});

这样做的一个原因是您不必将事件绑定到每个列表项元素。相反，您可以将一个事件附加到父级。假设您使用了单击

，则有200个列表项

$('li'.on("click", function () {
   //thing to do on click
});

每个元素都有自己的侦听器，效率低下。但是通过定位ul包装器父级并监听事件冒泡，您只需要附加到一个元素。这更有效率。在互联网上查找事件传播或事件冒泡。一个简单的解释是，当DOM中发生事件传播给父母的事件时。因此，如果你单击一个li，那么ul也会收到事件，就像包裹ul和body以及一直到窗口的任何其他div一样。

在jQuery中绑定和单击之间的确切区别？

3 个答案: