JQuery绑定事件的四种方法

最新推荐文章于 2024-07-14 03:40:57 发布

ruiy

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量6.3k

点赞数 1

文章标签： JQuery

本文链接：https://blog.csdn.net/b2997215859/article/details/51164616

版权

1、bind

首先，看函数调用形式：$("selector").bind(event,[data],function)

显然，data是可选的

例子：

<script type="text/javascript">
		$(function(){
			$("div").bind("click","asdf",function(){
				$("p").slideToggle();
			});
		});
		//$(document).ready();
	</script>

<body>
	<div style="width:100px;height:100px;background:#000"></div>
	<p>webwebwebwebwebwbewebwebwbebwebwebwe</p>
</body>

bind也可以同时将一个函数绑定在多个事件上如下

<script type="text/javascript">
		$(function(){
			$("div").bind("click mouseout dbclick","asdf",function(){
				$("p").slideToggle();
			});
		});
		//$(document).ready();
	</script>

bind也可以实现多对多，且单个事件绑定单个函数

$(function(){
			$("div").bind({"click":function(){
				$("#p1").slideToggle();
			},"mouseout":function(){
				$("#p2").slideToggle();
			}});
		});

2、live

绑定格式为live(event,[data],function)

其用法参考bind，这里需要注意一点，bind只能给已经存在的元素绑定事件，而live还能给未来的元素绑定事件

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("p").bind("click",function(){
				$("p").slideToggle();
			});
			$("button").click(function(){
				var new_obj = $("<p>这是一个新的段落<p>");
				$("<p>This is a new paragraph.</p>").insertAfter("button");
			});
		});
		//$(document).ready();
	</script>
</head>
<body>
	<div style="width:100px;height:100px;background:#000"></div>
	<p id="p1">webwebwebwebwebwbewebwebwbebwebwebwe</p>
	<button>在本按钮下添加新的段落</button>
</body>
</html>

3、delegate

格式 delegate(childSelector,event,data,function)

实际上，这就是事件委托，可以理解为把子元素的活委托给父元素，并且这种方式也可以绑定未来元素（脚本生成的元素）

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("ul").delegate("li","click",function(){
          this.innerHTML = "asdf";
      });
    });
  </script>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

4、on

格式 on(event,childSelector,data,function);

实际上，就是把delegate的俩个参数位置调换了，实例如下：

 <script type="text/javascript">
    $(function(){
      $("ul").on("click","li",function(){
          this.innerHTML = "asdf";
      });
    });
  </script>

总结：建议看看http://www.cnblogs.com/xilipu31/p/4105794.html

bind是比较早的一种绑定事件的方式，1，7后官方并不推荐使用，并且除了bind以外，live、delegate、on都支持对未来元素的绑定

live比delegate性能差些

on现在一般使用较广。