文档碎片 ——
在你需要用js创建多个节点时，可以使用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)
如果使用原先的一个元素一个元素的添加，添加多个将会影响js引擎的性能，使用createDocumentFragment()就会请求一次，减少了请求次数，提高了js引擎的效率。
target——JS属性
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
！！事件委托所必须的属性！！
语法：
event.target
event.target.nodeName //获取事件触发元素标签name（li,p...）
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容（li）
事件委托——
给父元素添加监听事件，通过e.target 获取点击事件，通过.nodeName获取节点名，（ 此方法都是大写）；
事件委托也可以称作事件代理，它的主要实现是依据事件冒泡的机制，一个交互好的网页离不开各种复杂的事件，但是事件太多会造成网页性能下降，有内存泄漏的风险。这个时候，就需要事件委托和代理了，使对象，不被直接触发，避免内存泄漏和网页性能下降。
重要属性：
e.target——可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口 e.srcElement——ie下的方法
注：e.target通常只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName（获取值大写）来获取具体是什么标签名，进而对特定节点的只进行操作例子
<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()转化成小写=="span"
e.target.style.backgroundColor="blue";
}
})
</script>
想要对dom进行多个操作，也可以用事件委托代理的方式
<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="移动" /><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){//通过swith进行判断达到绑定事件的作用
case'add': alert('添加');break;
case'remove': alert('删除'); break;
case 'move' : alert('移动'); break;
case 'select' : alert('选择'); break;
}
}
})
</script>
用事件委托的方式，新添加的子元素也是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。
网友评论