事件委托

事件委托

什么是事件委托：

利用事件冒泡的特性，在父节点上响应事件，而不是在子节点上响应事件。
利用事件冒泡的特性，将里层的事件委托给外层事件，根据event对象的属性进行事件委托，改善性能。

优点也显而易见：
性能更高，灵活，不需要操作大量的element

使用事件委托能够避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。（事件委托看起来挺难理解，但是举个生活的例子。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。）

<ul id="ul-item">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
</ul>

<script type="text/javascript">
    function fn(){
        var oUlItem = document.getElementById('ul-item');
        oUlItem.addEventListener('click',show,false);//添加监听事件
        function show(ev){
            var  ev = ev || window.event;
            var src = ev.target||ev.srcElement;//兼容IE下和FF下以及其他浏览器
            if(src && src.className.toLowerCase() === 'item'){//tolowerCase，将字符串全部转化为小写字母
                alert(src.innerHTML);
            }
        }
    };
    fn();
</script>

以下为补充知识（js的event.srcElement与event.target(触发事件源)）
IE下,event对象有srcElement属性,但是没有target属性;

Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj = event.srcElement ? event.srcElement : event.target;

或：var evtTarget = event.target || event.srcElement;

js将html的所有控件都看成是一个个对象，通过js的各个属性，就能对其进行操作处理，js里对象的整体结构是树形的结构。一层一层的追溯，即可获取需要的结果。

event.srcElement：表示的当前的这个事件源。
event.srcElement.parentNode：表示当前事件源的父节点。