如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
JavaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《JavaScript高级程序设计》一书提到:
DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。
事情到底是不是这样呢？观察下面的程序：
<html onclick=" clickHandle('html'); ">
<head>
<title>JAVASCRIPT事件流</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<script type="text/javascript">
function clickHandle(ele){
alert(ele);
}
</script>
</head>
<body onclick=" clickHandle('body'); ">
<div style="bgcolor:red" onclick=" clickHandle('div'); ">click me!</div>
</body>
</html>
IE：点击 click me 运行顺序为：DIV-->BODY-->HTML 点击页面其他部分：BODY-->HTML
FF: 点击 click me 运行顺序为：DIV-->HTML-->BODY 点击页面其他部分：HTML-->BODY
呵呵，好像跟书上说的不太一样哦！程序的运行结果告诉我们：不管是在IE下还是在FireFox下，事件总是由最精确的元素（也就是DOM树中最深的节点）首先触发，然后才开始IE下的冒泡和FireFox下的捕获。
JavaScript为我们提供了三种事件处理函数的分配方式，第一种就像上面的程序一样，是在HTML代码中分配事件处理函数。
第二种方法是在JavaScript中分配事件处理函数，这种方法首先必须得获得要分配事件处理函数的元素的引用，参考以下程序：
1 window.onload = function(){
2 var oDiv = document.getElementById("contentDiv");
3 oDiv.onclick = function(){
4 alert(oDiv.innerHTML);
5 }
6 }
就像上面提到的，该方法在分配事件处理函数时必须保证已经获得对该元素的引用，所以这个程序才把oDiv的onclick事件放在了onload事件的内部，否则会报oDiv未被定义。还有一个需要注意的地方是使用这种事件处理函数的分配方式时只能为某个特定的事件分配一个函数且事件函数的签名必须小写，否则前面分配的函数会被后面的函数所覆盖，如果想为同一个事件分配两个以上的处理函数，需要采用第三种事件处理函数分配方式。
在IE中我们使用obj.attachEvent()方法为某个元素分配函数，使用obj.detachEvent()方法为某个元素分离事件处理函数，而在DOM（以FireFox为例）中我们使用addEventListener()方法分配函数，使用removeEventListener()方法分离函数。
参考一下代码：
1 window.onload = function(){
2 var oDiv = document.getElementById("contentDiv");
3 var func1 = function(){
4 alert(oDiv.innerHTML);
5 }
6 var func2 = function(){
7 alert("also " + oDiv.innerHTML);
8 }
9 //IE
10 if(oDiv.attachEvent){
11 oDiv.attachEvent("onclick",func1);
12 oDiv.attachEvent("onclick",func2);
13 //oDiv.detachEvent("onclick",func1);
14 } else if(oDiv.addEventListener){
15 //FireFox
16 oDiv.addEventListener("click",func1,true);
17 oDiv.addEventListener("click",func2,true);
18 //oDiv.removeEventListener("click",func1,true);
19 }
20
21 }
我们来说明一下IE下与FireFox下这种事件处理函数的不同点：
1、在函数的第一个参数中，IE下必须有"on"做为前缀，而FF下不用，两种情况下处理函数签名必须小写。
2、FireFox下的addEventListener()函数的第三个参数表示的是：true表示在捕获阶段增加事件处理函数，false表示在冒泡阶段增加事件处理函数，但是由于FireFox不支持冒泡事件流，所以这里我们设成True或者Flase好像没什么区别。但是要注意的一点就是，如果在 addEventListener()中第三个参数设为true,那么在removeEventListener()方法中的第三个参数一定也要设为相同的值，否则方法失效。
3、在运行时阶段，IE首先执行的是最后边一个被增加的事件处理函数然后才是倒数第二个以此类推，但是在FireFox下与IE相反，他会按照事件处理函数的添加顺序执行。
分享到：
相关推荐
JavaScript学习笔记_js常用函数封装_js包 gulp scss 模块化开发 github常用命令
前端学习——javascript学习笔记（二）函数
共70页，复制两页供参考，如下： 1 JavaScript基本语法 1) 读未声明的变量会产生...但JavaScript默认的函数和构造函数会在每个窗口中拥有独立副本。 16) onload()和onunload()事件分别在网页装载完成后和卸载前执行。
javascript学习笔记发放2。这章我们 继续.然后了解下js中操作数据 和 函数的 作用域。
目 录 第 1 章 JAVASCRIPT的语法 1 ...1.6 JS中的系统函数（它们都属于GLOBAL对象的方法，可以直接使用） 9 1.6.1 parseInt(numString,[radix])方法 9 1.6.2 parseFloat方法 9 1.6.3 isNaN方法 9 1
JavaScript 学习笔记 包括常的函数收藏，希望对你有用
js 常用函数，html标签对象操作。dom对象结构理解
主要介绍了JavaScript学习笔记之函数记忆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
整理Javascript函数学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习Javascript函数，希望大家继续关注
函数是js世界的一等公民，js的动态性、易变性在函数的应用上，体现的淋漓尽致。下面这篇文章主要给大家介绍了关于JavaScript学习笔记之惰性函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
函数就是包裹在花括号中的代码块，前面使用了关键词function： 复制代码 代码如下: function functionName() { 这里是要执行的代码 } 函数参数 函数的参数可以任意多个，不用声明变量类型，只用给出变量名： ...
* 分号是用来分隔可执行JavaScript语句，由于函数声明不是一个可执行语句，所以不以分号结束。 函数表达式 var x = function( 参数 ){ ...执行的代码块 }; 函数表达式定义的函数，实际上也是一个匿名函数（这...
javascript 1 基本语法 1 动态函数 2 封装一个数组类 2 函数使用时注意事项 2 with语句 4 for，in 4 DOM 5 window 6 table 9 input 16 select 17 form 19 Ajax 22 接收文本数据 22 接收xml数据 23 ...
推荐阅读：JavaScript学习笔记之数组的增、删、改、查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题，最近刚好在学习有关于...
4、JavaScript函数： 2 5、在JavaScript中基于对象的编程： 3 6、内置的JavaScript对象： 3 7、处理对象的内置方法： 3 8、用户自定义对象： 4 9、使用IE的Scriptlet: 4 三、Form元素：文本框和按钮 5 1、文本框： 5...
在C和Java中，都有一个程序的入口函数或方法，即main函数或main方法。而在JavaScript中，程序是从JS源文件的头部开始运行的。但是某种意义上，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟...
Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。 在构造函数体内，this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式，那么我们就默认返回 ...
自己学习笔记。视频：腾讯课堂：渡一教育 内容大纲： 预编译: 函数 闭包问题 对象 原型、原型链、call、apply 继承模式 对象克隆 数组 类数组 数组去重 自定义type方法（类似于typeof） try-catch es5.0严格模式 ...