事件委托

事件委托（event delegation）或者说是事件代理。

好处：使用事件委托技术能让你避免对特定节点上添加事件监听器。

原理：事件监听器是要被添加到他们的父元素上的，分析从到底是哪个子元素的事件。简单的说就是利用事件冒泡，来指定事件处理程序。

那么我们为什么要用事件冒泡那？

  举个简单的例子，我们要为ul中的li添加事件，一个两个还好说，要是一百个一千个要怎么办那？循环？没错这是一个解决的方法，但是前端最注重的性能怎么办？添加在页面上的事件处理程序数量会影响到页面的性能，访问dom的次数越多自然是性能越差，如果用事件委托的话所有的操作都放在了js程序中，与dom的交互也就是这一次，这样就能提高性能。并且每个对象都是占有内存的，一个对象就是一个，所以说加入你有100个li，那就是100，你有100000个li那就是100000，并且用for性能还不好，但是事件委托是利用冒泡，所以你只要一个父元素就行，就只是一个ul，只需要一个内存空间。下面我们来看几个例子：

html：

<p>ooo</p>
<p>xxx</p>

js：

$(function(){
    $('p').click(function () {
        alert($(this).html())
    })首先这是一个方法

但是如果你后面又新加了p的话这个方法是不生效的，如果你用事件委托的效果就是：

   $(function () {
        $('body').on('click','p',function () {
            alert($(this).html())
        })
    })

上面的是用juqery写的，其中body就是他的父元素。之后会详细的讲讲jquer的一些事件委托函数。

html：

<ul id="ul">
    <li id="post-1">111</li>
    <li id="post-2">222</li>
    <li id="post-3">333</li>
    <li id="post-4">444</li>
    <li id="post-5">555</li>
</ul>

js：

  document.getElementById("ul").addEventListener('click',function (e) {
        //e.target是被点击的事件。
        if(e.target && e.target.nodeName=="LI"){
         console.log("List Item" ,e.target.id.replace("post-" ,""),"was clicked")
        }
    });

首先这个例子知道说说的是：

首先用来addeventlistener事件监听，第三个参数并没有写，默认的是false，冒泡。

之后用到了evenet对象提供的一个target的属性，是指的事件目标节点，成为事件源，不过浏览器是有兼容性的，首先：

var event =event||window.event;

var target=event.target||event.srcElement;

上面的是用来兼容低版本ie和其他的浏览器的。

（补充一个知识点:里面还用了一个nodeName，是用来获取具体的什么标签名字的，这个返回的是大写的，可以用转化成小写的在作比较，用法上自然就是node.nodeName）；

有些方法不适合用事件委托，像是没有事件冒泡的特性的更是用不了了（比如锁是focus 和blur）。有些很适合，比如说是 click ，mousedown,keydown ,keyup, mouseup...

下一个博客我们来说一说jquery的事件委托方法，和区别。