js事件委托和文档碎片

json格式转换
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

文档碎片 ——

在你需要用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){
            console.log(document.documentElement);
            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操作，这才是事件委托的精髓所在。