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);    });

这篇文章就到这了，记录学习心得，如有错误，恳请指正！