on('click') vs .click() ?

Question

两者之间的写法在任何项目是否会不同的区别？

$('#whatever').on('click', function() {
     /* your code here */
});

and

$('#whatever').click(function() {
     /* your code here */
});

Answer 1

当$('#whatever')这个元素不是dom结构中原先就存在的，而是后期生成的就需要用on来绑定事件，
否则会出现$('#whatever')找不到

Answer 2

实际上并无不同。

请看源码：
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js

    jQuery.each(("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error contextmenu").split(" "), function(i, name) {
        // Handle event binding
        jQuery.fn[name] = function(data, fn) {
            return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);
        };
    });

Answer 3

如果懒得看源码，其实仔细看文档也是有帮助的：

文档地址：click

Answer 4

on可以理解为原生的addEventListener吧，类似事件委托

Answer 5

场景分析，以下应用场景适合使用on的方式

1. 子节点事件委派，子节点会后续再追加，新生成的子节点也想使用同样的事件

2. 为节点指定命名空间，以便off的时候可以移除指定命名空间的事件，而不是移除所有，如$(e).on('click.ns',fun) 移除时$(e).off('click.ns')

如果事件是单独使用，不关联其他业务的，可以直接$(e).click(fun)，方便

Answer 6

具体使用中on('click')可以给还没生成的DOM节点绑定事件，.click() 只能给已经存在的DOM节点绑定事件。

$('#area').on('click','.sub-button', function() {
     /* your code here */
});

当id为area的区域内动态生成class名为sub-button的按钮时，都会绑定上该事件。

Answer 7

其实没有什么不同,实际开发中用on多一点,直接click可读性差!

Answer 8

$(parentSelector).on("click",childSelector,fn);

多用于事件委托，用来给动态创建的DOM绑定事件，将动态创建的child元素的点击事件委托到调用此方法前已创建的父元素parent上。

$(selector).click(fn);

直白的添加点击事件，只能给这个方法声明之前已经创建的DOM绑定事件。