jQuery 事件绑定及取消 bind live delegate on one区别解析

目录

• 1.bind（）
• 取消绑定用 unbind()方法
• 2.live()
• 3.delegate ()
• undelegate()取消绑定事件
• 4.on()
• 取消绑定事件的方法是off（）
• 5.one()

on bind delegate live one 四种方法差别不是特别大 bind讲完后，后面的方法只会说不同点

1.bind（）

$(selector).bind(event,data,function,map)

event 必需。规定添加到元素的一个或多个事件。

最简单的写法 绑定单个事件执行事件函数，

$("p").bind("click",function(){
    alert("这个段落被点击了。");
});

这样写跟普通的写法没区别 就没必要使用绑定事件方法了

obj.click(function(){})

注：js同一个dom元素多次绑定同一事件，只会执行最后一次的事件，所以如果有这种需求，需要使用addEventListener方法添加事件，jquery则不会 它会全部执行，两者都是同时执行，并不是按顺序一一执行。

bind（）方法可以进行多个事件绑定，添加回调函数，

$(document).ready(function(){
  $("p").bind("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});

两个事件分别执行一次函数内容，如果要事件单独执行各自的函数 可以使用map映射（分开写）的方法，就可以各自执行了，

$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","#E9E9E4");},  
  });
});

或者添加多个事件后 ，函数使用event.type来判断是哪一个事件来进行各自的函数内容。

$(document).ready(function(){
  $("p").bind("click dblclick mouseover mouseout",function(e){
if(e.type == 'click'){
alert('这是click事件')
}else if(e.type == 'dblclick'){
alert('这是dbclick事件')
}
  });
});

data是可选的额外添加的数据，函数中可以用event.data接受使用。

$(document).ready(function(){
        $("p").bind("click", {msg: "你刚点击了!"}, function handlerName(e){
                        alert(e.data.msg);      })
});

取消绑定用 unbind()方法

$("button").click(function(){
$("p").unbind();     //取消p标签所有绑定的事件
});

unction alertMe()
{
        alert("Hello World!");
}
$(document).ready(function(){
  $("p").click(alertMe);
        $("p").click(function(){
        alert(123)});
  $("button").click(function(){
    $("p").unbind("click",alertMe);       //将p标签单击调用alertMe的事件取消
  });
});

$(document).ready(function(){
        var x=0;
        $("p").click(function(e){
                $("p").animate({fontSize:"+=5px"});
                x++;
                if (x>=2)
                {
                        $(this).unbind(e); //还可以通过取消参数 来接触事件
                }
        });
});

2.live()

和bind方法有两个不同

1.没有map不能单独规定事件

2.live方法绑定的事件会应用于当前现有的元素以及未来元素，也就是事件委托机制，把节点的处理统一委托给了根节点document，所以后面动态添加的新节点同样会有相同的事件。

$("button").live("click",function(){
$("p").slideToggle();  //给所有的p节点添加了收缩事件，包括动态添加的新的p标签
});

注：使用live（）方法只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；

取消绑定用die()方法 跟unbind()一样。

3.delegate ()

$(selector).delegate(childSelector,event,data,function)

这个方法就相当于加强版的live()方法，由于live方法事件委托会直接委托在根节点上，费时费力，

于是就有了delegate()方法，它可以选择委托范围，就是给selector父节点内的所有childSelector子节点绑定事件。

$(document).ready(function(){
  $("div").delegate("p","click",function(){   //给div里的p标签绑定事件
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");//动态添加的新标签会保留事件
  });
});

undelegate()取消绑定事件

4.on()

究极进化的产物，集前面三位所长为一身，也是最推荐用的，在版本更新迭代中，前面三位有的无了。

$(selector).on(event,childSelector,data,function) 和delegate书写顺序不同 这个on要先写事件

它既可以给单个标签绑定事件，有map映射，也可以自主选择事件委托对象给后面动态创建的节点绑定事件。

取消绑定事件的方法是off（）

这里就不做演示了 跟上面的大同小异，大家赶快去试试吧！

5.one()

$(selector).one(event,data,function)

one()方法相当于bind区别是one只执行一次,就会自动解除事件.

$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });
});

原文地址：https://lamian.blog.csdn.net/article/details/124826188