JavaScript之事件流

来源：互联网发布：江西网络行政学院编辑：程序博客网时间：2024/05/02 02:36

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。页面载入完成时，会出现一个事件。用户点击按钮时，点击也是一个事件。开发人员用这些事件来执行编码进行响应。JavaScript通过将一些功能在客户商用实现来节省返回服务器的时候。完整的事件是在DOM Level3中规定的。该标准在2004年最终定案。
　　什么是事件流呢？事件流意味着在页面上可有不仅一个，甚至多少元素响应同一个事件。点击页面上的按钮时，会发生什么？实际上，是点击了按钮、它的容器及整个页面。从逻辑上说，每一个元素都按照特定的顺序响应那个事件。
（一）冒泡型事件
IE上的解决方案是绰号为冒泡的技术。冒泡型事件的基本思想是，事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。例如，如果有页面：

<html>
　　<head>
　　　　 <title>一个例子</title>
　　 </head>
　　 <body onclick=”haddleClick()”>
　　　　 <div onclick=”handleClick()”>点击测试</div>
　　 </body>
</html>
如果用户点击<div/>元素，则事件按以下顺序“冒泡”：
（1）<div/>—>（2）<body/>—>（3）<html/>—>（4）document—>（5）window，事件“起泡”一直上升到window窗口对象。之所有称为冒泡，是因事件按照DOM的层次结构像水泡一样不断上升至顶端。
（二）捕获型事件
事件的捕获和冒泡刚好是相反的过程，事件从最不精确的对象开始触发，然后到最精确（也可以在窗口级别捕获事件，不过必须由开发人员特别指定）。有人也称之为自顶向下的事件模型，因为它是从DOM层次的顶端开始向下延伸的。
（三） DOM事件流
DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型先发生。两种事件流会触及DOM中所有的对象，从document对开开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件的捕获/冒泡延续至window对象）。拿上面的例子来讲，事件的目标（<div/>元素）是最精确的元素，实际上它会连续接收两次事件，一次在捕获过程中，另一次在冒泡过程中。
　　DOM事件模型最独特的性质是，文本节点也触发事件。如果要对兼容DOM标准的浏览器进行开发，这是非常重要的概念。