事件委托与点击事件绑定

委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。点击事件这么频繁，主要是想办法解决浏览器的点击该怎么安排，设计比较好

事件委托

解决的问题：有很多的dom需要添加事件处理
“事件委托” 的本质是利用了事件冒泡的特性。把事件处理函数绑定到容器元素上，当容器内的元素触发事件时，就会冒泡到容器上。此时可以判断事件的源头是谁，再执行对应的事件处理函数。

• 先用实例理解冒泡

html

    <div id="parent">        父元素        <div id="child">            子元素        </div>    </div>

js

        var parent = document.getElementById("parent");        var child = document.getElementById("child");        document.body.addEventListener("click", function(e) {            console.log("冒泡-body");        }, false);        parent.addEventListener("click", function(e) {            console.log("冒泡-parent");        }, false);        child.addEventListener("click", function(e) {            console.log("冒泡-child");        }, false);

红色为parent,蓝色为child

点击蓝色

点击红色

可以看到事件触发顺序是由内到外的（想象下dom树结构），这就是事件冒泡，虽然只点击子元素，但是它的父元素也会触发相应的事件，至于怎么阻止，就不细说了

• 经典的例子，为每个li绑定事件

    <ul id="btn">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul>

事件委托实现（提醒：使用 .onclick 这样的事件属性来绑定事件有一个非常大的缺点，重复赋值会覆盖旧值。）

 var btn = document.getElementById('btn'); btn.addEventListener('click', btnClick); function btnClick(e) {    var that = this;    if (e.target.nodeName.toLowerCase() === 'li') {                //do something         }   }

• 其中JQuery中的$.on()就很好地实现了事件委托

$('body').on('click','li',function(){    // do something})

只要明白冒泡原理，应该是很好理解的

点击事件解决方案

• 最近看到css魔法的一个解决方案action，很赞
• 具体思路
  
  1. 利用html5的data-*属性设置统一的事件标识
  2. 事件以var list= {a:function(){ }}方式存储
  3. 再用JQuery的$.on()实现事件委托
  4. $.data()获取对应的data-*，list[$.data()]设置响应事件
  5. 实现代码

HTML

    <button data-action="lucky-draw">Lucky Draw</button>    <button data-action="some-action">Button</button>    <a href="#" data-action="another-action">Link</a>

JS

  $(function() {        var actionList = {            'lucky-draw': function() {                console.log("I am lucky-draw");            },            'some-action': function() {                console.log("I am some-action");            },            // ...            'another-action': function() {                console.log("I am another-action");            }        };        $('body').on('click', '[data-action]', function() {            var actionName = $(this).data('action');            var action = actionList[actionName];            if ($.isFunction(action)) action();        });// 添加新的点击事件        // HTML        $('body').append('<a href="#" data-action="more-action">Link</a>')        // JS        $.extend(actionList, {            'more-action': function() {                console.log('I am more');            }        })    })