饥人谷技术博客

jQuery事件绑定

2017-04-28  本文已影响134人  辉夜乀

1.普通事件绑定

$("#btn").on("click",function(){
    console.log("我被点击了")
})

给事件添加命名空间

$("#btn").on("click.myClick",function(){
    console.log("我被点击了")
})
  // .myClick 就是添加的命名空间,用来标识本次事件,删除事件的时候方便指定
$("#btn").off("click.myClick")  // 仅仅解绑了上面的那个事件

2.事件代理

$("ul").on("click", "li", function(){
    var text = $(this).text()
    console.log(text)
})

3.可以在绑定的时候给事件处理程序传递一些参数

$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

4.bind、unbind、delegate、live、on、off都有什么作用

$("#btn").bind("click.myClick", function() {
    console.log("我被点击了")
})
$("#btn").unbind("click.myClick")
$("ul").delegate("li", "click", function() {
    var text = $(this).text()
    console.log(text)
})
    //普通事件绑定
$("#btn").on("click",function(){
    console.log("我被点击了")
})
    //事件代理绑定
$("ul").on("click", "li", function() {
    var text = $(this).text()
    console.log(text)
})
$("#btn").off("click.myClick")

推荐使用:
on方法,因为既能普通绑定事件,也能事件代理绑定

注意:on的事件代理和delegate的事件代理,写法不一样,子元素和触发事件的位置不同

    //on的事件代理 
$("ul").on("click", "li", function() {
  var text = $(this).text()
  console.log(text)
})
    //delegate的事件代理
$("ul").delegate("li", "click", function() {
  var text = $(this).text()
  console.log(text)
})
  /*li和click的位置不一样*/
上一篇下一篇

猜你喜欢

热点阅读