事件委托

利用事件冒泡的原理，就是让自己的所触发的事件，让他的父元素代替执行！

当有多个类似的元素需要绑定事件时，一个一个去绑定即浪费时间，又不利于性能，这时候就可以用到事件委托，给他们的一个共同父级元素添加一个事件函数去处理他们所有的事件情况

代码分析：可能大家会疑惑，我们并没有给li分别设置点击函数，为什么点击相应的li却会产生效果，我们可以这么理解，虽然我们没有给li设置点击事件，但是默认的点击事件是采用的事件冒泡，冒泡到父级元素的点击事件是，用事件的target属性判断进行点击的元素

<ul id="1ist">

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

</ul>



    <script type="text/javascript">

        document.getElementById('1ist').addEventListener('click', function (e) {

            e.target.innerHTML = "被点击";

        });

    </script>

 

e.target表示在事件冒泡中触发事件的源元素，在IE中是e.srcElement，并且e.target有很多属性可以操作

event.target.nodeName //获取事件触发元素标签name（li,p…）

event.target.id //获取事件触发元素id

event.target.className //获取事件触发元素classname

event.target.innerHTML //获取事件触发元素的内容（li）