解释一下:
live使用了事件委托,即把本该绑定在某个元素上的事件绑定在了HTML根元素上,由于这种做法比起delegate的效率低,所以,在jQuery1.9+中删除了live。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
#box{
position:relative;
width:400px;
height:300px;
background-color: red;
}
</style>
</head>
<body style="height:1000px;">
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
</ul>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li class="t">第3个li</li>
</ul>
<div id="box">
我是box
</div>
<input id="btn" type="button" value="添加一个li">
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
let ord = 3;
$(function () {
/*
$("ul").click(function (event) {
let evt = event || window.event;
console.log("ul,currentTarget:"+evt.currentTarget);
console.log("ul,target:"+evt.target);
});
$("body").click(function (event) {
let evt = event || window.event;
console.log("body,currentTarget:"+evt.currentTarget);
console.log("body,target:"+evt.target);
console.log("您点击的是:"+evt.target.innerHTML);
});
*/
//live使用的是事件委托(把本该绑定在指定元素上的事件类型和事件处理函数委托给DOM根元素)
$("li").live("click",function () {
alert(this.innerHTML);
});
$("#btn").click(function () {
ord++;
$("ul").append("<li>第"+ord+"个li</li>");
});
/*
$("li").live("click",function () {
if(evt.target 在 $("li")){
alert(this.innerHTML);
}
});
$(".t").live("click",function () {
if(evt.target 在 $(".t")){
alert(this.innerHTML);
}
});
$("#box ul").live("click",function () {
if(evt.target 在 $("#box ul")){
alert(this.innerHTML);
}
});
$("#box").live("click",function () {
alert(this.innerHTML);
});
*/
});
</script>