jQuery live() 实现方法

最新推荐文章于 2024-07-03 02:50:17 发布

不耐烦

最新推荐文章于 2024-07-03 02:50:17 发布

阅读量1.4k

点赞数

分类专栏： javascript jQuery 文章标签： jquery javascript border class function xhtml

本文链接：https://blog.csdn.net/g125989100/article/details/6894541

版权

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

前几天研究jquery live()的实现方式，网上看了下资料，大体就是给父级绑定事件然后通过事件冒泡判断event.target来实现，于是就写了个例子.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box1 { width:500px; height:500px; border:1px solid #F00; background:#F00; margin:0 auto }
.box2 { width:400px; height:205px; border:1px solid #0F0; background:#0F0; margin:30px auto 0 auto; }
.box22 { width:400px; height:205px; border:1px solid #0F0; background:#0F0; margin:30px auto 0 auto; }
.box3 { width:300px; height:145px; border:1px solid #00F; background:#00F; margin:30px auto 0 auto; }
#xx a { display:block; width:100px; height:20px; line-height:20px; }
</style>
<script type="text/javascript">
window.onload = function(){
	document.getElementById("box1").onclick = function(e){
		var e = e || window.event;
		var target = e.target || e.srcElement;
		alert(target.clientWidth);
	};
	
	document.getElementById("xx").onclick = function(e){
		var e = e || window.event;
		var target = e.target || e.srcElement;
		target.style.backgroundColor = "red";
		target.innerHTML = target.innerHTML+"1"
	};
	document.getElementById("xx").innerHTML = "<a href=\"javascript:;\">1</a><a href=\"javascript:;\">2</a><a href=\"javascript:;\">3</a><a href=\"javascript:;\">4</a><a href=\"javascript:;\">5</a>"
	
};
</script>
</head>

<body>
<div class="box1" id="box1">
	<div class="box2">
		<div class="box3"></div>
	</div>
	<div class="box22">
		<div class="box3"></div>
	</div>
</div>
<p id="xx"> </p>
</body>
</html>