一.事件流

    事件流描述的是从页面中接收事件的顺序，包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。

    场景：页面层叠了三个盒子，最下面是big盒子，中间是middle盒子，上面是small盒子

    点击small，肯定也点击了middle,big,body,html,document->结束

    事件流就是讨论页面元素接收事件的顺序

    1.事件捕获阶段：网景团队提出的事件流叫做事件捕获,即事件开始时由最不具体(document)的节点应该早接收到事件，而最具体的节点(small)应该最后接收到事件。

    2.目标阶段：当前操作的元素(samll)

    3.事件冒泡阶段：微软团队提出的事件流叫做事件冒泡，即事件开始时由最具体的元素(small)接收，然后逐级向上传播到较为不具体的节点,一直到文档document。

    二.测试普通的事件

    注意事件类型必须相同

    var big = document.querySelector(‘.big’); var middle = document.querySelector(‘.middle’); var small = document.querySelector(‘.small’); document.onclick = function() { alert(‘document’); }; document.documentElement.onclick = function() { alert(‘html’); }; document.body.onclick = function() { alert(‘body’); }; big.onclick = function() { alert(‘big’); }; middle.onclick = function() { alert(‘middle’); }; small.onclick = function() { alert(‘small’); };

    结果：点击某个元素之后，其父级上的相同事件也会被触发，一直传递到document上，在这个不断向父级追溯的过程中，父级们拥有的相同事件都会被一起触发，除非在某一父级上这个事件加了取消冒泡属性。

    得到的结果：普通事件具有事件冒泡，事件冒泡可以取消。