jquery - 绑定事件on和bind的区别

1. on可以对动态创建的元素进行绑定，而bind不行

如：
对.btn进行绑定点击事件，点击.btn后会新增另一个.btn按钮

<button class="btn">btn1</button>

• 使用bind绑定

          $(".btn").bind("click",function(){
                var newBtn = '<button class="btn">btnAdd</button>'
                $("body").append(newBtn);
            })

点击新增的btnAdd按钮后无法触发事件

ZZ.gif

• 使用on绑定
  使用on直接对元素进行事件绑定和bind的效果相同

          $(".btn").on("click",function(){
                var newBtn = '<button class="btn">btnAdd</button>'
                $("body").append(newBtn);
            })

所以需要利用on的一个参数childSelector（可选）来实现

            //点击body中类名为btn的元素触发点击事件
            $("body").on("click",".btn",function(){
                var newBtn = '<button class="btn">btnAdd</button>'
                $("body").append(newBtn);
            })

这样[图片上传中...(xx.gif-903844-1602815882681-0)]
点击新增的btnAdd按钮后也可以触发事件

xx.gif

on()方法的语法与参数

• 语法：
  $(selector).on(event,childSelector,data,function)

• 参数：

  
  image.png

bind()方法的语法与参数

• 语法：
  $(selector).off(event,selector,function(eventObj),map)

• 参数：

  
  image.png

2.扩展：为绑定事件添加事件名

            //为.btn添加mousemove，mouseleave，mousedown事件
            $(".btn").bind("mousemove.doTest",function(e){
                $(this).text("mouse move")
            }).bind("mouseleave.doTest", function(e){
                $(this).text("mouse leave")
            }).bind("mousedown.doTest", function(e){
                $(this).text("mouse down");
                //取消.btn所有的绑定事件
                $(".btn").unbind(".doTest")
            })

为.btn添加mousemove，mouseleave，mousedown事件，所有事件的事件名为doTest。触发mousedown事件时，取消.btn所有名为doTest绑定事件（利用unbind(".doTest")）。

yy.gif