JavaScript一個通用于代理和不代理的綁定事件函數

這篇文章主要關于js一個通用的綁定事件函數。綁定事件在我們開發的過程中會經常用到。寫一個通用的函數是很必要的。

這裡先講一下代理。如一下代碼，ul中有很多個li，而且li還有可能增加。如果要為每個li添加一個點選事件，操作起來将比較麻煩，代碼量大不簡潔，占記憶體。這時可以将事件代理到ul上，當點選li時，由于事件冒泡，ul上也起作用，之後再判斷是點選那個li即可。

<ul id="uid">
    <li id="id1">id1</li>
    <li id="id2">id2</li>
    <li id="id3">id3</li>
    <li id="id4">id4</li>
    <li id="id5">id5</li>
    ...
</ul>
           

這裡也可以提一下，事件的代理的好處是：代碼簡潔和減少浏覽器記憶體占用。

說完了事件代理，下面來到本文章的重點，通用綁定事件函數。廢話不多說，直接上代碼。

/**
     * 一個通用代理和不代理的綁定事件函數
     * @param  {[type]}   elme     [要綁定事件元素]
     * @param  {[type]}   type     [事件類型]
     * @param  {Function} fn       [處理函數]
     * @param  {[type]}   selector [可選參數，要代理事件的元素]
     * @return {[type]}            [無]
     */
    function bindEvent(elme, type, fn, selector){

        elme.addEventListener(type, function(e){
            var target;
            if(selector){//使用代理
                target = e.target;//擷取觸發事件的元素
                if(target.mathchs(selector)){
                    fn.call(target,e);
                }
            }else{
                fn(e);
            }

        });
    }
           

函數比較簡單，就不多解釋。下面運用這個通用函數，寫兩個例子。

//使用代理，為每一個li将點選事件代理在父級元素ul上
    var ul = document.getElementById('uid');
    bindEvent(ul, 'click', function(e){
        console.log(this.innerHTML);
    },'li');

    //不使用代理
    var l1 = document.getElementById('id1');
    bindEvent(l1, 'click', function(e){
        console.log(l1.innerHTML);
    });
           

這篇文章就到這了，記錄學習心得，如有錯誤，懇請指正！