jQuery事件绑定方法学习总结(推荐)

对于jQuery中的事件绑定方法，主要有on()、bind()、delegate()、live()等这几个方法。之前都是之前拿过来用，也知道有这么几个方法，但是不清楚这几个事件绑定方法之间的区别。平时用的最多的是on方法，今天打算整理一下。

bind方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>bind事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//点击添加一个新的元素
$("#btn").click(function(){
 $("div").append("<p>这是一个新的p元素</p>");
});
//给所有的p元素绑定点击事件
$("div p").click(function(){
 alert($(this).text());
});
</script>
</body>
</html>

这种绑定事件的方式缺点：

当页面上p元素特别多的时候，会导致页面上存在大量的事件处理程序，导致页面性能差；

对于动态生成的新元素，不具有点击事件。

对于这两个缺点，我们可以通过下面即将要介绍的delegate方法来解决。

delegate方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>jQuery事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
 $("div").append("<p>这是一个新的p元素</p>");
});
$("div").delegate("p", "click", function () {
 alert($(this).text());
});
</script>
</body>
</html>

上面的例子中我们使用事件委托的原理，利用delegate来绑定事件。

不直接为p元素绑定事件，而是为其父元素（或祖先元素）绑定事件，当在div内任意元素上点击时，事件会一层层从event target(目标元素)向上冒泡，直至到达你为其绑定事件的元素，如此例中的div元素。冒泡的过程中，如果事件的currentTarget与选择器匹配时，就会执行代码。

这样就解决了用bind()方法的上面两个问题，不用再一个个地去为p元素绑定事件，有效减少了页面上事件处理程序数量，也可以为动态添加进来的p元素绑定事件。

这种方式也是有缺陷的：这样绑定是容易了，但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了。

bind和delegate源码实现

bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
 },
 unbind: function( types, fn ) {
  return this.off( types, null, fn );
 },

 delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
 },
 undelegate: function( selector, types, fn ) {
  // ( namespace ) or ( selector, types [, fn] )
  return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
 }

从源码中可以看出，无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同罢了。

on方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>jQuery事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//给每一个p元素绑定点击事件
$("div").on("click","p",function(){
 alert($(this).text());
});
</script>
</body>
</html>

移除事件

对于bind()、delegate()和on()绑定方法，其移除事件的方法分别为：

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

小结

•选择器匹配到的元素比较多时，不要用bind()迭代绑定;
•用id选择器时，可以用bind();
•需要给动态添加的元素绑定时，用delegate()或者on();
•用delegate()和on()方法，dom树不要太深;
•尽量使用on()。

以上这篇jQuery事件绑定方法学习总结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于Jquery中的事件绑定总结

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出.交流. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事

  • jQuery绑定事件的四种方式介绍

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

  • jQuery 绑定事件的方式总结

      jQuery 绑定事件 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前    一:bind(type,[data],function(eventObjec

  • jQuery事件绑定用法详解

    jQuery事件绑定用法详解

    本文实例讲述了jQuery事件绑定.分享给大家供大家参考,具体如下: style.css *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content {

  • jQuery事件绑定方法学习总结(推荐)

    对于jQuery中的事件绑定方法,主要有on().bind().delegate().live()等这几个方法.之前都是之前拿过来用,也知道有这么几个方法,但是不清楚这几个事件绑定方法之间的区别.平时用的最多的是on方法,今天打算整理一下. bind方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl

  • jquery事件绑定方法介绍

    jquery事件绑定方法介绍

    一.bind() bing()用来绑定事件,例如: 二.unbind() unbind()用来解除事件的绑定.例如: 三.on() on()方法用来绑定事件,例如: 四.off() off()方法用来解除事件的绑定,例如: 注意: 建议用on()方法绑定事件,效率更高. 五.示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met

  • jQuery事件绑定与解除绑定实现方法

    本文实例讲述了jQuery事件绑定与解除绑定实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name=

  • jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one().   有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现:   1. on()

  • jQuery事件绑定用法详解(附bind和live的区别)

    本文实例分析了jQuery事件绑定用法.分享给大家供大家参考,具体如下: html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button cl

  • jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    本文实例讲述了jQuery事件绑定和解绑.事件冒泡与阻止事件冒泡及弹出应用.分享给大家供大家参考,具体如下: 事件的绑定和解绑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src=&qu

  • jquery事件preventDefault()方法用法实例

    本文实例讲述了jquery事件preventDefault()方法用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery事件:preventDefault()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <

  • 深入理解jQuery事件绑定

    html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button class="cBtn">button2</b

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

随机推荐