jQuery事件绑定

作者: 辉夜乀 | 来源:发表于2017-04-28 19:36 被阅读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都有什么作用

  • bind:给元素绑定一个或多个事件
$("#btn").bind("click.myClick", function() {
    console.log("我被点击了")
})
  • unbind:给元素解绑事件
$("#btn").unbind("click.myClick")
  • delegate:用于事件代理,为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数;适用于当前或未来的元素(比如由脚本创建的新元素)。
$("ul").delegate("li", "click", function() {
    var text = $(this).text()
    console.log(text)
})
  • live():这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。在新版本中推荐用.on()法,即时在旧版本中,也推荐使用.delegate()方法来取代.live()方法。
  • on:在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。
    //普通事件绑定
$("#btn").on("click",function(){
    console.log("我被点击了")
})
    //事件代理绑定
$("ul").on("click", "li", function() {
    var text = $(this).text()
    console.log(text)
})
  • off:解除事件绑定
$("#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的位置不一样*/

相关文章

  • Jquery day_3

    1.1 Jquery 事件注册 1.2 jquery 事件处理 on(): 用于事件绑定,目前最好用的事件绑定方...

  • jquery对节点的操作

    Jquery对事件的绑定 $().bind(“事件类型”, 事件处理); 给jquery绑定一个事件$().bi...

  • 通过jquery动态添加的元素绑定事件

    1.一般通过jquery绑定事件# 2.通过jquery添加的元素绑定事件#

  • jQuery中绑定事件时bind和on的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡;jquery文档中bind和on函数绑定事件的用法: ...

  • jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡; jquery文档中bind和on函数绑定事件的用法:...

  • 03-jQuery事件相关

    事件绑定与解绑 jQuery中有两种绑定事件方式eventName(fn);编码效率略高/部分事件jQuery没有...

  • jQuery事件

    1、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 jquery在1.7版本之前绑定事件可通过bi...

  • jQuery知识整理

    jQuery jQuery和DOM关系 jquery框架对象分析 加载事件 事件绑定 动画效果 jquery封装的...

  • jquery事件

    jQuery其他事件 绑定事件 自定义事件

  • 从零玩转jQuery-事件处理

    事件绑定 jQuery中事件绑定有两种方式eventName(function(){})绑定对应事件名的监听, ...

网友评论

    本文标题:jQuery事件绑定

    本文链接:https://www.haomeiwen.com/subject/degozttx.html