事件处理模型 -冒泡-捕获-以及事件委托

触发顺序为 先捕获后冒泡

冒泡

事件冒泡 ：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，子元素冒泡向父元素 （自底向上）

<div class="zu" style="background: red; width: 100px; height: 100px;">
    <div class="fu" style="background: yellow; width: 50px; height: 50px;">
        <div class="zi" style="background: blue; width: 25px; height: 25px;">
        </div>
    </div>
</div>
<script>
    // 触发冒泡，
    var zu = document.getElementsByClassName('zu')[0];
    var fu = document.getElementsByClassName('fu')[0];
    var zi = document.getElementsByClassName('zi')[0];
    zu.addEventListener('click',function(){
        console.log("zu");
    },false);
    fu.addEventListener('click',function(){
        console.log("fu");
    },false);
    zi.addEventListener('click',function(){
        console.log("zi");
    },false);
</script

捕获

事件捕获 ：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，父元素捕获至子元素 （自顶向下）
ie没有捕获事件

<script>
    var zu = document.getElementsByClassName('zu')[0];
    var fu = document.getElementsByClassName('fu')[0];
    var zi = document.getElementsByClassName('zi')[0];
    zu.addEventListener('click',function(){
        console.log("zu");
    },true);
    fu.addEventListener('click',function(){
        console.log("fu");
    },true);
    zi.addEventListener('click',function(){
        console.log("zi");
    },true);
</script>

当事件捕获与事件冒泡都存在时，先捕获后冒泡。如果是捕获绑定在前冒泡在后，顺序就是先捕获再冒泡，但是如果先绑定冒泡在绑定 捕获的话，会在触发事件的元素哪里出现元素的事件执行在元素的的事件执行，但这的事件执行时，谁先绑定，谁先执行，因为是先绑定的冒泡，所以执行顺序为 zu捕获 fu捕获 zi事件执行/此处执行zi冒泡 zi事件执行 fu冒泡 zu 冒泡 事件执行谁先绑定先执行谁

冒泡的取消

zi.addEventListener('click',function(e){
    // 事件对象： 可以在每一个事件处理函数中写一个形参，系统会传入事件对象，事件对象会记录这个事件发生时的一系列数据，系统会把它打包成一个对象传到形参里
            e.stopPropagation(); //取消冒泡 stopPropagation 是事件对象上的一个方法 
            e.cancelBubble =true; //兼容ie 谷歌上也有
            console.log("zi");
        },false);

事件委托

利用事件冒泡，和事件源对象进行处理

   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        // 使用事件委托，将li的文本打印在控制台
        var ul = document.getElementsByTagName("ul")[0];
        ul.onclick = function (e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            console.log(target.innerText);
        }
    </script>