事件的冒泡和捕获

事件的冒泡,简言之,事件的触发顺序从内部开始

例子如下:

var box_father = document.getElementById('box_father');
        var box_grandfather = document.getElementById('box_grandfather');
        var p1 = document.getElementById('p1');
        box_grandfather.onclick = function () {
            alert("来自grandfather的消息");
        }
        box_father.onclick = function () {
            alert("来自father的消息");
        }
        p1.onclick = function () {
            event.stopPropagation(); //阻止p的点击事件
            alert("来自p的消息");
        }
        /* 如果点击p元素文字会出现冒泡,从而元素的onclick事件会向上层传递(冒泡),触发拥有onclick事件的父级元素的点击事件 */
        /* 阻止事件冒泡,就把event.stopPropagation()直接扔到事件的代码块中 */

事件的捕获,简言之,事件的触发顺序是:由外向内,由父元素向子元素触发事件

例子如下:

 var a = document.getElementById('a');
        var b = document.getElementById('b');
        var p = document.getElementById('p');
        a.addEventListener('click', function () {
            alert('a');
        }, true);
        b.addEventListener('click', function () {
            alert('b')
        }, true)
        p.addEventListener('click', function () {
            alert('p')
        }, true)
        //addEventListener 有三个参数
        //第一个是 事件名
        //第二个是 函数方法
        //第三个是 布尔值   （判断是事件冒泡还是事件捕捉  true 是事件捕捉  false 是事件捕捉）
        //简言之,执行顺序是和冒泡是相反的