jQuery中 on 和 bind的区别

jQuery中 on 和 bind 的区别

先看参数

1.bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数
2.on有四个参数，分别是event，selector, data，function 分别是事件，选择器，额外添加的数据和执行函数。

首先啊，有没有发现，多了一个选择器. 我们来举个场景的例子

一个大的dom节点里有两个小的节点，比如一个class1，一个class2.所以你会这样写

var x = docuemnt.getElementByClassName("name")[0];
x.addEventLister("click",function(e) {
    var target = e.target;
    if (target.className === "class1") {
        dosomething();
    }else if (target.className === "class2") {
        doanother();
    } else {
        console.err("ss");
    }
})

是不是很烦，这样子你需要判断事件对象，那么在jquery里面

你只需要

$('.name').on("click",'.class1', function() {
    dosonmething();
}).on("click",'.class2', function() {
    doanother();
});

这是on能做到的，bind不可以。

总而言之，言而总之。on和bind的区别是

1.on 可以多一个selector 参数,可以给子元素添加事件
bind 只能给自己添加事件
2. 使用on添加的事件比如给自己子集使用类选择器添加的 ,后来创建的含有这个类名的子节点也有事件
3.on是jquery推荐使用的，bind是从某个版本开始就不推荐使用的