jQuery动态绑定元素事件

在绑定事件中，目前有on(), bind(), delegate(), live()四种绑定方式,有些方式只能对已知元素进行绑定，对于未知动态的元素获取就没有办法。

bind()方式绑定

    bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件，是没有办法达到效果的。

on()事件绑定

① 使用on进行单事件绑定

$("button").on("click",function(){

$(this) 取到当前调用事件函数的对象

console.log($(this).html());

});

 ② 使用on同时为多个事件，绑定同一函数

$("button").on("mouseover click",function(){

console.log($(this).html())

})；

③ 调用函数时，传入自定义参数 ⭐️⭐️⭐️这个用法可以动态的为html还未加载出来的数据进行事件绑定

$("button").on("click",{name:"liuJian"},function(event){

使用event.data.属性名 找到传入的参数

console.log(event.data.name);

})

④ 使用on进行多事件多函数绑定⭐️⭐️⭐️

$("button").on({

click:function(){

console.log("click")

},

mouseover:function(){

console.log("mouseOver")

}

});

⑤ 使用on进行事件委派⭐️⭐️⭐️⭐️⭐️常用的动态绑定事件

  将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素生效；

eg：$("p").click(function(){});

 $(document).on("click","p",function(){});

// document是指在全页面的根结点上做操作，这样一来页面不管怎么样子节点选择都不会绑定失败

// 默认的绑定方式，只能绑定到页面初始时已有的p元素，当页面新增p元素时，无法绑定到新元素上

// 使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件

附文：

off() 取消事件绑定

1. $("p").off(): 取消所有事件

2. $("p").off("click"): 取消点击事件

3. $("p").off("click mouseover"):取消多个事件

4. $(document).off("click","p"):取消事件委派