實現原理:
其實就是將事件綁定到父節點,由於事件冒泡,所有事件最終會冒泡到document節點
當有事件觸發時,則判斷事件類型和觸發事件的元素是否一致,如果相同則執行函數
<!doctype html>
<html>
<head>
<title>jquery live()函數原理及實現</title>
<style type="text/css">
table{
border-collapse:collapse;
border-spacing:0;
}
td{
border:1px solid #cdcdcd;
}
</style>
<script type="text/javascript">
function live(target, type, fn){ //元素類型,事件類型,執行函數
document.onclick = function(event){
var e = event ? event : window.event;
addRow();
if(e.type == type && e.target.tagName.toLocaleLowerCase() == target){
fn(); //如果元素類型和事件類型同時匹配,則執行函數
}
}
}
function addRow(){
var x=document.getElementById("tb").insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
}
//實例:將所有的td(包括後續js添加的)綁定click事件
live("td", "click", function(){
alert("live");
});
</script>
</head>
<body>
<table id="tb">
<tr>
<td>..........................................</td>
<td>..........................................</td>
</tr>
<tr>
<td>..........................................</td>
<td>..........................................</td>
</tr>
<tr>
<td>..........................................</td>
<td>..........................................</td>
</tr>
</table>
</body>
</html>
jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡