事件委托

通俗的讲，onclick，onmouseover，onmouseout等这些就是事件

委托，就是这个事件本来应该加在某些元素上的，而你却加到其他元素上来完成这个事件。

事件委托原理

利用事件传播（冒泡）机制，就可以实现事件委托 。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）来完成

1.获取当前事件源

　　在火狐中获得触发事件的元素（事件源）可以用：

　　　　event.target

　　在IE中获得触发事件的元素（事件源）可以用：

　　　　event.srcElement

　　// 兼容写法 var Target = event.target||event.srcElement;

2.事件委托优点

　　1，提高性能、效率高

　　2，新添加的元素也会有之前的事件

　　3，代码量少

3.获取目标源

　　在mouseover事件中，它指向鼠标来自哪个元素

　　　　 event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型

　　　　 fromElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型

　　　　　　 var from=event.relatedTarget||event.fromElement;

　　在mouseout事件中，它指向鼠标去往的那个元素

　　　　event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型

　　　　event.toElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型

　　　　　　 var to=event.relatedTarget||event.toElement;

　　　　parent.onclick=function(ev){
            var e=ev||window.event;
            var target=e.target||e.srcElement;
            console.log(ev);
            if (target.nodeName=='H3') {
                target.style.background='pink';
            }
            if (target.nodeName=='EM') {
                target.style.background='blue';
            }
            if (target.nodeName=='SPAN') {
                target.style.background='orange';
            }
            if (target.id!=parent) {
                target.style.background='brown';
            }
        }

box.onclick=function (ev){
            var e=ev||window.event;
            var target=e.target||e.srcElement;
            if (target.nodeName=='LI'&&target.parentNode.id=='list') {
                target.style.background='pink';
            }
            if (target.nodeName=='LI'&&target.parentNode.id=='list2') {
                target.style.background='blue';
            }
        }

 

var con=document.getElementById('con');
        var btn=document.getElementById('btn');
        var list=document.getElementById('list');
        document.onclick=function(ev){
            var e=ev||window.event;
            var target=e.target||e.srcElement;
            if (target.id=='btn') {
                list.style.display='block';
            }
            if (target.nodeName=='LI'&&target.parentNode.id=='list') {
                con.innerHTML=target.innerHTML;
                list.style.display='none';
            }
            if (target.id!='list'&&target.id!='btn') {
                list.style.display='none';
            }
        }