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事件绑定

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