文檔碎片 ——
在你需要用js創(chuàng)建多個(gè)節(jié)點(diǎn)時(shí)着倾，可以使用document.createDocumentFragment()
例子
var frag = document.createDocumentFragment();
for(var x = 0; x < 10; x++) {
var li = document.createElement("li");
li.innerHTML = "List item " + x;
frag.appendChild(li);
}
listNode.appendChild(frag)
如果使用原先的一個(gè)元素一個(gè)元素的添加墅拭，添加多個(gè)將會(huì)影響js引擎的性能，使用createDocumentFragment()就會(huì)請(qǐng)求一次样刷，減少了請(qǐng)求次數(shù)，提高了js引擎的效率。
target——JS屬性
target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)）温圆，如生成事件的元素、文檔或窗口孩革。
Ｋ昵浮！事件委托所必須的屬性Ｏヲ凇刨裆！
語(yǔ)法：
event.target
event.target.nodeName //獲取事件觸發(fā)元素標(biāo)簽name（li,p...）
event.target.id //獲取事件觸發(fā)元素id
event.target.className //獲取事件觸發(fā)元素classname
event.target.innerHTML //獲取事件觸發(fā)元素的內(nèi)容（li）
事件委托——
給父元素添加監(jiān)聽(tīng)事件澈圈，通過(guò)e.target 獲取點(diǎn)擊事件，通過(guò).nodeName獲取節(jié)點(diǎn)名帆啃，（ 此方法都是大寫(xiě)）瞬女；
事件委托也可以稱(chēng)作事件代理，它的主要實(shí)現(xiàn)是依據(jù)事件冒泡的機(jī)制努潘，一個(gè)交互好的網(wǎng)頁(yè)離不開(kāi)各種復(fù)雜的事件诽偷，但是事件太多會(huì)造成網(wǎng)頁(yè)性能下降，有內(nèi)存泄漏的風(fēng)險(xiǎn)疯坤。這個(gè)時(shí)候报慕，就需要事件委托和代理了，使對(duì)象压怠，不被直接觸發(fā)眠冈，避免內(nèi)存泄漏和網(wǎng)頁(yè)性能下降。
重要屬性：
e.target——可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)）菌瘫，如生成事件的元素蜗顽、文檔或窗口 e.srcElement——ie下的方法
注：e.target通常只是獲取了當(dāng)前節(jié)點(diǎn)的位置，并不知道是什么節(jié)點(diǎn)名稱(chēng)雨让，這里我們用nodeName（獲取值大寫(xiě)）來(lái)獲取具體是什么標(biāo)簽名雇盖，進(jìn)而對(duì)特定節(jié)點(diǎn)的只進(jìn)行操作例子
<body>
<div id="box">
<div id="div">
<ul>
<li>我是Li</li>
<p>我是p</p>
<span>我是span</span>
<li>我是Li</li>
<li>我是Li</li>
<li>我是Li</li>
<span>我是span</span>
<li>我是Li</li>
<li>我是Li</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
document.querySelector("div").addEventListener("click",
function(e){
e.target.style.backgroundColor="red";
if(e.target.nodeName=="SPAN"){//也可以用toLowerCase()轉(zhuǎn)化成小寫(xiě)=="span"
e.target.style.backgroundColor="blue";
}
})
</script>
想要對(duì)dom進(jìn)行多個(gè)操作，也可以用事件委托代理的方式
<body>
<div id="box">
<div id="div">
<ul>
<input type="button" id="add" value="添加" /><br />
<input type="button" id="remove" value="刪除" /><br />
<input type="button" id="move" value="移動(dòng)" /><br />
<input type="button" id="select" value="選擇" /><br />
</ul>
</div>
</div>
</body>
<script type="text/javascript">
document.querySelector("div").addEventListener("click",
function(e){
if(e.target.nodeName=="INPUT"){
switch(e.target.id){//通過(guò)swith進(jìn)行判斷達(dá)到綁定事件的作用
case'add': alert('添加');break;
case'remove': alert('刪除'); break;
case 'move' : alert('移動(dòng)'); break;
case 'select' : alert('選擇'); break;
}
}
})
</script>
用事件委托的方式栖忠，新添加的子元素也是帶有事件效果的崔挖，我們可以發(fā)現(xiàn)，當(dāng)用事件委托的時(shí)候庵寞，根本就不需要去遍歷元素的子節(jié)點(diǎn)狸相，只需要給父級(jí)元素添加事件就好了，其他的都是在js里面的執(zhí)行捐川，這樣可以大大的減少dom操作卷哩，這才是事件委托的精髓所在。
