bind / on / click
最后更新于：2022-04-02 03:18:45
[TOC]
## bind / on / click 区别
1. `click` 不支持 动态扩展的元素
2. `on` [推荐]
可监听**动态**扩展的元素,通过第二个`selector`参数,但必须 其父元素不是动态添加的
```
格式: .on(events [,selector] [,data], handler)
$('ul').on('click', 'li', function(){console.log('click');}
$(document).on('click', ".click_class",function(){})
```
3. `bind`
`格式 .bind(events [,eventData], handler)`
缺点:
1. 性能问题,会绑定到所有选择元素上,
2. 不会绑定到动态添加的元素上
3. 页面加载完,才能使用bind. 存在效率问题
优点:
1. 兼容性好,
2. `.click(),.hover()` 是其简化处理结果
3. **如果使用 绑定的是`id`唯一等元素,可优先考虑`bind`**
## on / bind 方法对data 参数的使用
```
function bindClick( event ) {
var type = event.data.type; //可在事件参数的data属性中获取
if (type=="1") {
alert(event.data.msg)
}else if(type =="2"){
alert(event.data.msg)
}
};
$( "p" ).on( "click",{type:"1",msg:"hello"},bindClick );
$( "p" ).on( "click",{type:"2",msg:"word"},bindClick );
```
## 动态绑定点击事件
把动态的类当作on 的第二个参数传入
```
$(document).on('click', ".click_class",function(){
Console.info("run here");
});
```
';