jQuery的三种bind()、on()、live()事件的对比和使用

来源：互联网发布：国乒集体退赛知乎编辑：程序博客网时间：2024/05/20 09:11

官方在1.7就已经取消使用live()方法了，所以建议使用on()方法。

温馨提醒一下：参数里面被[]包里来的都是可选参数

1、bind(type,[data],fn(eventObject)) 为每个匹配元素的特定事件绑定事件处理函数

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。这类类型可以包括如下：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。这里需要注意的是，这里用的都是javascript里面的事件方法，而不是JQuery里面的，JQuery里面的事件方法均在JavaScript 前面多了一个“on”，比如onclick,onblur 等等。

data:作为event.data属性值传递给事件对象的额外数据对象，这个参数有个不错的用处，用来处理闭包的问题，待会儿给大家端上栗子～

fn:绑定到每个匹配元素的事件上面的处理函数

01\先来个简单的栗子

$('a').bind('click',function(){

alert('ok')

})

02\同时它也可以绑定多个事件（也可以按照下面的on()绑定多个事件的写法来）：

$('.test').bind('mouseenter',function(){

console.log('mouseenter')

}).bind('mouseout',function(){

console.log('mouseout')

})

03\bind()事件的对象

fn这个回调函数可以接受一个参数，当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。

这个事件对象通常是没有必要且可以省略的参数，因为当这个事件处理函数绑定的时候就能够明确知道他在触发的时候应该做些什么，通常就已经可以获得充分的信息了。然而在有些时候，在事件初始化的时候需要获取更多关于用户环境的信息。

栗子如下：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>bind()事件</title>

<style>

p {

background:yellow;

font-weight:bold;

cursor:pointer;

padding:5px;

}

p.over {

background:#ccc;

}

span {

color:red;

}

</style>

</head>

<body>

<p>Click or double click here.</p>

<span></span>

<script type='text/javascript'>

$("p").bind("click", function(event){

var str = "( " + event.pageX + ", " + event.pageY + " )";

$("span").text("Click happened! " + str);

});

$("p").bind("dblclick", function(){

$("span").text("Double-click happened in " + this.nodeName);

});

$("p").bind("mouseenter mouseleave", function(event){

$(this).toggleClass("over");

});

</script>

</body>

</html>

这里的主要功能是为了事件当用户点击p这个对象时，把当前相对于页面的坐标显示出来，这里就用到了event这个对象。把参数传进去

04\unbind()事件

unbind(type,[data],fn)时bind()的反向操作，从每个匹配元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。你也可将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

栗子上来：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>unbind()事件</title>

</head>

<body onclick="MyBodyClick()">

<div onclick="MyClickOut()">

<div onclick="MyClickInner()">

<span id="MySpan">I love JQuery!! </span>

</div>

</div>

<span id="LooseFocus">失去焦点</span>

</body>

<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script>

function MyClickOut() {

console.log("outer Div");

}

function MyClickInner() {

console.log("Inner Div");

}

function MyBodyClick() {

console.log("Body Click");

}

var foo = function () {

console.log("I'm span.");

}

$(function () {

$("#MySpan").bind("click", foo);

})

$(function () {

$("#LooseFocus").unbind("click", foo);

})

</script>

</body>

</html>

上面的代码也很好理解，就是当用户的鼠标在span上面停留的时候，然后把span的click事件给取消掉。所以，最后它只会弹出body里面的console.log()。

2、on(event,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数

event：一个或多个用空格分隔的事件类型和可选的命名空间，如："click"/"keydowm.myPlugin";

selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代，如果选择器为null或省略，当它到达选定的元素，事件总是触发

data：当一个事件被触发时要传递event.data给事件处理函数

fn：该事件被触发时执行的函数。false值也可作为一个函数的简写，返回false

栗子：

$(document).on('click','#id',function(){

//function code here

})

或者也可以这样写：

$('#id').on('click','li',function(){

//function code here

})

这里的关键就是第二个参数‘selector’在起作用。它是个过滤器的作用，只有被选中的元素的后代元素才会触发事件，

而这里我就情不自禁想提一提之前一次偶然我遇到的一个问题：

怎么给动态添加的按钮添加事件？

这里试过了bind('click',function(){})和on('click',function(){})都无效，最后查阅了资料菜发现其实它们这样写的话并没有太大的区别，但是on()可以绑定到document上，而且还比bind()多一个参数，而正是这个参数起到了至关重要的作用，当我把写法改为：

$(document).on('click','#id',function(){

//function code here

})

这里把click事件绑定到document对象上，这时页面上的任何元素发生的click事件都会冒泡到document对象上得到处理，所以即使是未来元素，也可以在经过这样的处理之后被冒泡到document对象上得到处理。

同时将on的第二个参数‘selector’（'#id'）之后,当事件冒泡到document对象时，如果与传入的选择符匹配的话就触发事件，否则不触发。

这样的时候，此时我就可以给动态添加的按钮添加相应的事件了～～ 比心

另外，on()也是可以接受一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。以下是官方栗子：

<div class="test">test div</div>

<script>

$('div.test').on({

click:function(){

$(this).toggleClass('active')

},

mouseenter:function(){

$(this).addClass('inside')

},

mouseleave:function(){

$(this).removeClass('inside');

}

})

</script>

3、live(type,[data],fn)给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的。

$('a').live('click',function(){

alerk('ok')

})

因为live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除，所以就不细聊了

最后提一下：delegate(selsctor,[type],[data],fn)指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$('#container').delegate('a','click',function(){

alerk('ok')

})

差别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。

和.bind()的优势是支持动态的数据

.delegate()则是更精确的小范围使用事件代理，性能优于.live();

.on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制

0 0