js性能優化-事件委託

時間 2019-12-14

原文原文鏈接

先大概瞭解一下：javascript

事件委託(代理) ：利用的就是冒泡操做
1.性能要好
2.針對新建立的元素，直接能夠擁有事件。html

因此有時候須要經過循環節點來綁定事件的話，那請用事件委託吧，這樣性能更好哦，固然JQ裏面自己就是有delegate,on這些方法了，可是原生的話，作一下兼容性處理就行了。主要以一個例子學習一下。java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <ul id="list">
            <li>
                <input type="checkbox">複選框
                <div class="add">
                    <a href="#@" class="add">增長</a>
                    <a href="#@" class="delete">刪除</a>
                </div>
            </li>                                
        </ul>
    </div>
    <div id="all">
        <a href="javascript:;" id="select">全選</a>
        <a href="javascript:;" id="remove">刪除</a>
    </div>
    <script>
var eventUtil={
    addHandler: function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type, handler);
        }else{
            element["on" + type] = handler;
        }
     },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
 };
var temp = 0;
var olist = document.getElementById('list'),
    oall  = document.getElementById('all'),
    oselect = document.getElementById('select'),
    oremove = document.getElementById('remove'),
    oInput = olist.getElementsByTagName('input');    
function handler(){
    var e = arguments[0] || window.event,
        node = e.srcElement?e.srcElement:e.target,
        nodeTag = node.nodeName.toLowerCase(),
        nodeClass = node.className,
        targetNode = node.parentNode.parentNode,
        minLen = olist.getElementsByTagName('li').length;        
        if(nodeTag == 'a' && nodeClass == 'add'){ //增長節點
            olist.appendChild(olist.getElementsByTagName("li")[0].cloneNode(true));
        } else if(nodeTag == 'a' && nodeClass == 'delete'){ //刪除節點
            if(minLen > 1){
                olist.removeChild(targetNode);
            }
        } else {
            return;              
        }
}
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {        
        element.textContent = text;   
    } else {        
        element.innerText = text;    
    }
 }
function select(){
    var e = arguments[0] || window.event,
        node = e.srcElement?e.srcElement:e.target;    
    if(temp == 0){
        temp = 1;
        setInnerText(node,'反選');
        for(var i=1; i<=oInput.length; i+=1){
            oInput[i-1].checked = true;
        }
    } else {
        temp = 0;
        setInnerText(node,'全選');
        for(var i=1; i<=oInput.length; i+=1){
            oInput[i-1].checked = false;
        }
    }
}
function removeAll(){//倒序刪除節點，避免刪不完整
    for(var i = oInput.length - 1; i >= 0; i--) {      
        if(oInput[i].checked == true && oInput.length > 1){
            olist.removeChild(oInput[i].parentNode);
        }     
    }     
}
eventUtil.addHandler(olist,"click",handler);//綁定增長刪除的方法
eventUtil.addHandler(oselect,'click',select);//綁定全選反選方法
eventUtil.addHandler(oremove,'click',removeAll);//綁定刪除方法
    </script>
</body>
</html>