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

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