事件流与事件委托

事件对象：当一个对象触发了所绑定的事件，所发生的一切详细信息都将保存在一个临时的地方，这个地方就叫做事件对象（相当于黑匣子）
    1、通过触发事件时给处理函数所传递的第一个参数（evt），就是事件对象；（不兼容IE8及以下跟谷歌早期版本）
    2、通过内置的全局对象：window.event来获取事件对象（只兼容IE9以下和谷歌早期版本）（IE9及以上不能用）
//兼容  var e = evt || window.event


一、事件流：（浏览器默认启动为事件冒泡）


（一）事件冒泡：由子节点依次向父节点，一直到祖先节点传递事件，这个过程称为事件冒泡。在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序（事件委托）或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
    阻止事件冒泡的方法
    event.stopPropagation(); //标准
    event.cancelBubble = true; //IE的方式


    //兼容
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;


（二）事件捕获：由祖先节点向子节点层层传递，传递到最底层的子节点，这个过程称为事件捕获；（IE不支持事件捕获）
    捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水底下沉一样，（要说明的是在IE、Opera浏览器中，是不存在这个阶段的。）从各个浏览器提供的注册事件监听的方法中可见一斑，例如适用于IE、Opera的attachEvent，有两个参数：attachEvent("on" + event,fn)（event代表事件名，如："click"），二所谓的标准浏览器的addEventListener则有三个参数：addEventListener(event,fn,boolean)，第三个参数boolean，就是决定注册事件发生在捕获阶段（true）还是冒泡阶段（false）。




二、事件委托机制
什么是事件委托：通俗的讲，事件就是onclick,onmouseover,onmouseout等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：提高性能


例如：
<ul>
    <li>aaaaaa</li>
    <li>bbbbbb</li>
    <li>cccccc</li>
    <li>dddddd</li>
    <li>eeeeee</li>
    <li>ffffff</li>
</ul>
<script>
    var oLis = document.getElementsByTagName("li");//获取所有的li
    //遍历给所有的li加事件
    for(let i = 0;i < oLis.length;i ++){
oLis[i].onmouseover = function(){
   this.style.background = "red";
        }
oLis[i].onmouseout = function(){
   this.style.background = "";
}
    }


    //事件委托（只需要给父类加事件就行了）
//这里要用要事件源：event对象.事件源，不管在哪个事件中，只要是你操作的那个元素就是事件源
    var oUl = document.getElementById("ul1");//只需获取ul
    oUl.onmouseover = function(evt){
        var e = evt || window.event;
        //兼容 event.target(标准浏览器)  event.srcElement(IE)
var target = e.target || e.srcElement; //事件源
if(target.nodeName.toLowerCase() == "li"){
   target.style.background = "red";
}
    };
    oUl.onmouseout = function(evt){
var e = evt || window.event;
//兼容
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == "li"){
   target.style.background = "";
}
    };


//这里的事件冒泡是，鼠标滑过li冒泡后也滑过了ul,通过冒泡原理只需添加滑过ul的事件就行了 但这里的本身操作是发生在li上，所以事件源就是li 


</script>


注：
onmouseenter 与 onmouseleave 是不存在冒泡
onmouseover 与 onmouseout 存在冒泡