JQuery调用绑定click事件的3种写法

JQuery是一种非常常用的JavaScript框架，它可以快速简便地开发JS功能，提高开发效率。其中，绑定click事件是JQuery使用最广泛的功能之一。JQuery调用绑定click事件的3种写法包括：直接写法、.on写法和.click写法。接下来就详细讲解这3种写法的具体实现方式及其优缺点。

直接写法

直接写法就是直接在选择器后面跟上click事件的回调函数。这种写法相对比较简单，适用于非常简单的页面逻辑，或者对代码规范要求不高的情况。

$('button').click(function(){
    //todo...
});

这种直接写法的缺点是，随着页面逻辑越来越复杂，选择器选择的范围也会不断扩大，如果有些元素需要动态添加，则无法使用该方法绑定事件。另外，如果需要取消事件绑定，则需要使用.off方法，且其无法取消匿名函数绑定事件。

.on写法

.on写法使用.on方法来绑定事件，相对于直接写法，它可以处理动态添加元素的情况，也可以通过.off方法来取消事件的绑定，并且可以在绑定事件时指定事件触发的元素。

$('body').on('click', 'button', function(){
    // todo...
});

这里的body是一个已经存在的元素，button是后来动态添加的元素，这种写法可以确保后续动态添加的button元素也能继承该事件绑定。此外，这种写法同样存在缺点，就是当button元素较多时，每次点击body都会触发，从而影响页面性能。

.click写法

.click写法和直接写法相似，使用.click方法来绑定事件，但是这种写法可以通过.unbind方法来取消事件绑定，同时也可以对匿名函数的绑定事件进行取消。

$('button').click(function(){
    // todo...
}).unbind('click');

这种写法的缺点在于，unbind方法只能解绑当前元素的事件，对于动态添加的元素与匿名函数，无法解除事件的绑定。

综合来看，我们可以根据不同的需求来选择不同的绑定方式。例如，对于与动态元素交互较多并且需要解除绑定的事件，则建议使用.on或者.click写法，而对于绑定非常简单的事件，直接写法更加方便。