javascript的事件流、绑定事件处理程序以及阻止事件流

开门见山

一、何为事件流：当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。

事件流主要分为两种：

1.冒泡型事件（所有浏览器都支持）
由明确的事件源到最不确定的事件源依次向上触发

2.捕获型事件（IE不支持）
由不确定的事件源到明确的事件源一次向下触发。

3.DOM事件流

如图，W3c的DOM事件触发分为三个阶段：
①、事件捕获阶段，即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件
②、处于目标阶段，检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件。
③、事件冒泡阶段，从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件。

事件捕获阶段：实际目标（div）在捕获阶段不会接收事件。也就是在捕获阶段，事件从window到document再到body就停止了。
处于目标阶段：事件在div上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。

二、事件处理程序：响应某个事件的函数就叫做事件处理程序。
因此，click对应的时间处理程序就是 “onclick”。给事件指定事件处理程序有好几种方式。

1.html方式

<div class="zuzhi">
    <button type="button" onclick="alert('html方式')">html方式</button>
</div>

或者在html页面里面直接添加函数名称

<script>
    function a(){
    
        alert('html方式')
    }
</script>
<div class="zuzhi">
    <button type="button"  onclick="a()">html方式</button>
</div>

使用html事件处理程序的缺点：
1. 不符合HTML内容和JavaScript事件分离的原则，应该尽量避免这种添加事件处理函数的方式。
2. 存在时差问题，上面第二种方式，如果函数定义在按钮下面，页面底部定义的，如果用户在页面解析shoumessage函数之前单击按钮，就会引发错误。
3. html和JavaScript耦合度太高，如果想要修改事件处理程序，就要同时修改html代码和JavaScript代码。
基于上述原因呢，我们一般不适用html方式的事件处理程序，而使用DOM事件处理程序

2.DOM事件处理程序
目前DOM事件处理程序：DOM0级方式，DOM2级方式，和IE处理方式。

（1）DOM0级事件处理程序
DOM0级的事件处理程序很简单,onclick就是常用的DOM0级事件处理函数，只会在冒泡阶段被处理。

<div class="zuzhi"></div>
<script>
    var zvzhi=document.getElementsByClassName('zuzhi')[0];
    zvzhi.onclick=function(){
    
        alert("DOM0级处理程序方式");
    };
</script>

这是我们经常用到的一种方式，以这种方式添加的事件处理程序将会在事件冒泡阶段被处理。
同样也可以删除通过DOM0级方法指定的事件处理程序，只要将其设置为 null 即可：

zvzhi.onclick=null;

使用DOM0级事件处理程序的优点：
浏览器兼容性较好，早期的浏览器都能完美支持这种方式。
使用DOM0级事件处理程序最大的缺点：
在于为同一个对象指定多个事件处理程序的时候，后面的函数将会覆盖前面的。
如下例：

<div class="zuzhi"></