JQuery中click与live两种绑定click事件的区别，live()方法到on()方法的转变

最新推荐文章于 2025-01-05 09:52:15 发布

原创最新推荐文章于 2025-01-05 09:52:15 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#click事件无效 #live无效 #on方法使用

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析jQuery中click与live事件的区别，包括原理、使用场景及如何在新版本中用on()方法替代live()。并通过实例展示了不同事件绑定方式的特点。

一、前言：

在web项目中，经常使用jQuery应该知道，JQuery中click与live两种绑定click事件是有区别的，随着jQuery版本的升级，在jQuery1.9中live()方法已经被移除，不在支持，其后的版本通过on()方法进行替换。

二、JQuery中click与live两种绑定click事件的区别

1、click绑定事件

原理：当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数

click([[data],fn]) 在每一个匹配元素的click事件中绑定的处理函数,可传入data供函数fn处理。

1.参数data是作为event.data属性值传递给事件对象额外的数据对象，中参数以json格式传递
2.参数fn是绑定到每个选择元素的事件中的处理函数

【1】不带参数data的例子

$(document).ready(function() {
    $('#divid').click(function() {
        console.log('你好');
    });
});

【2】带带参数data的click()方法

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>
	JQuery [data]参数使用说明
</title> 
 <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
	
<script type="text/javascript">
$(function(){
     var message="把该信息传递给Fn函数";
     $("#divid").click({msg:message},function(event){           
                   $("#idTip").show().html(event.data.msg);
               }
     );//设置文本
     });
	</script>
</head>
<body>
<input id="divid"></div>
<div id="idTip"></div>
</body>
</html>

总结：在文档流中，后续通过脚本动态添加的元素(符合 id="divid")，是没有绑定click事件的。所以

2、live绑定事件

$('#divId').live('click', function() {
    console.log('hello');
});

总结：后续通过脚本动态添加的元素(符合 id="divId")，也是绑定了click事件的，注意本方法只在jQuery1.9以前的版本可用。

三、jQuery中live()方法到on()方法的转变写法

1、live(）方法

live(type, [data], fn)

给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

原理：

live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。

案例：

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

<script>    
    $(function(){
        /*live()方法，在jQuery1.9中被移除*/
        $("div").live("click",function(){
            $(this).hide();
        });
    });
</script>

总结：jQuery1.7中已不推荐使用live()方法，在jQuery1.9中移除了该方法，jQuery1.9+用on()方法替代。

2、on()方法

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

参数说明：
events：一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的是null或省略，当它到达选定的元素，事件总是触发。
data：当一个事件被触发时要传递event.data给事件处理函数。
fn：该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

jQuery1.9官方文档中的一些描述：

【Changes of Note in jQuery 1.9】
    The .live() method has been deprecated since jQuery 1.7 and has been 
instead. To exactly match $("a.foo").live("click", fn), for example, you 
can write $(document).on("click", "a.foo", fn). For more information, see 
the .on() documentation. In the meantime, the jQuery Migrate plugin can be
 used to restore the .live() functionality.

例子：

1、绑定click事件，使用off()方法移除on()所绑定的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#dd").on("click",function(){

             $(this).css("background-color","pink");

     });

    $("#ddd").click(function(){

         $("#dd").off("click");  //使用off()方法移除标签p上的on()所绑定的方法
        
    });
});
</script>
</head>
<body>

<p id="dd">点击这个段落。</p>
<p id="ddd">去掉on方法。</p>
</body>
</html>

2、多个事件绑定同一个函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#dd").on("mouseover mouseout", function(){
$("body").css("background-color","lightgray");
          
    });
   $("#ddd").on("mouseover mouseout", function(){
$("body").css("background-color","red");
          
    });
});
</script>
</head>
<body>

<p id="dd">点击这个段落。</p>
<p id="ddd">点击这个段落。</p>
</body>
</html>

3、多个事件绑定不同函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
           $(document).ready(function(){

  $("p").on({

    mouseover:function(){$("body").css("background-color","lightgray");},  

    mouseout:function(){$("body").css("background-color","lightblue");}, 

    click:function(){$("body").css("background-color","yellow");}  

  });

});
</script>
</head>
<body>

<p>点击这个段落。</p>

</body>
</html>

4、绑定自定义事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
 
</head>
<body>

   <button>Button #1</button>
        <script>
            //自定义事件
            $(document).on("event_mzwu_com", function(event, param1, param2) {
                alert(param1 + "\n" + param2);
            });
            //触发自定义事件
            $("button:first").click(function() {
             //param1对应"Custom"，param2对应 "Event"
                $(document).trigger("event_mzwu_com", ["Custom", "Event"]);
            });
        </script>

</body>

5、传递数据到函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   //传递数据到函数
	$("#dd").on("click", {msg: "你刚惦记我了!"}, handlerName)
	
});
//自定义函数	 
function handlerName(event)
{
  alert(event.data.msg);
}
</script>
</head>
<body>

<p id="dd">点击这个段落。</p>
 
</body>
</html>

6、适用于未创建的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	var message="把该信息传递给Fn函数";
	//div下的p元素
    $("div").on("click","p",{msg:message},function(event){
        alert(event.data.msg);
  });
	
$("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
	
});
//自定义函数	 
function handlerName(event)
{
  alert(event.data.msg);
}
</script>
</head>
<body>
<div>
<button id="dd">
按钮</button>
	</div>
	<p>不在范围内</p>
</body>
</html>