jQuery live() 实现方法

来源：互联网发布：福建省广电网络编辑：程序博客网时间：2024/04/27 02:45

前几天研究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>