利用事件冒泡 和事件源对象进行处理
    优点
    1 性能 不需要循环所有的元素一个个绑定事件
    2 灵活 当有新的子元素时不需要重新绑定事件

    1. <body>
    2.     <ul>
    3.         <li>1</li>
    4.         <li>2</li>
    5.         <li>3</li>
    6.         <li>4</li>
    7.         <li>5</li>
    8.         <li>6</li>
    9.         <li>7</li>
    10.         <li>8</li>
    11.         <li>9</li>
    12.         <li>10</li>
    13.     </ul>
    14.     <script>
    15.         var ul = document.getElementsByTagName('ul')[0];
    16.             ul.onclick = function (e) {
    17.                 var event = e || window.event;
    18.                   //target即为事件源对象
    19.                 var target = event.target || event.srcElement;
    20.                 console.log(target.innerText);
    21.             }
    22.     </script>
    23. </body>

    这里有一个ul里面有10个li li多大决定了ul多大
    事件委托我们只需要给ul设置一个事件 而不用单独给每一个li都设置事件
    然后点击每一个li时 只需要寻找到事件的源对象 即可找到对应被点击的li
    然后输出li里的内容通过即可
    这时不管有多少个li这个方法都不受影响