事件冒泡：ie的事件流叫事件冒泡（事件开始由最具体逐级向上传播到较为不具体的节点）
事件捕获：netscape 提出的另一种事件流叫事件捕获（不太具体的节点逐级向下传播到具体的节点与冒泡相反。）
DOM事件流
3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为捕获事件提供机会，然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以再这个阶段对事件作出响应。
事件处理程序（或事件侦听器）
定义：响应某个事件的函数。以on开头。
DOM0级事件处理程序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM0级事件处理程序</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<input type="button" id="myRemoveBtn" value="Remove Event Handler" />
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id);
};
var removeBtn = document.getElementById("myRemoveBtn");
removeBtn.onclick = function(){
btn.onclick = null;//删除事件处理程序
};
</script>
</body>
</html>
DOM2级事件处理程序
定义了2个方法，用于处理制定和删除事件处理程序的操作：addEventListener()和removeEventListener()
接收三个参数：要处理的事件名，作为事件处理程序的函数， 一个布尔值。 true:表示在捕获阶段调用事件处理程序。false:表示在冒泡阶段调用。
主要好处是：可以添加多个事件处理程序。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM2级事件处理程序</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<p>本实例在IE9以下的浏览器无法运行。</p>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
</script>
</body>
</html>
相关推荐
NULL 博文链接：https://aotostar.iteye.com/blog/816695
javascript高级程序设计学习笔记，共100+页，记录了js的方方面面，比较适合于自学。
JavaScript高级程序设计 事件学习笔记，需要的朋友可以参考下。
javacript高级程序设计的个人学习总结，涉及到很多javascript的高级特性
基于JavaScript高级程序设计第四版的学习笔记
JavaScript基础知识的详细思维导图，以及 个人学习之后的总结。导图由个人总结而出，仅限参考。
第十八章 高级技巧 1.高级函数 1.1 作用域安全的构造函数 ①直接调用构造函数而不适用new操作符时，由于this对象的晚绑定，它将映射在全局对象window上，导致对象属性错误增加到window。 代码如下: function Person...
NULL 博文链接：https://phoebird.iteye.com/blog/584484
JavaScript高级程序设计 错误处理与调试学习笔记，学习js的朋友可以参考下。
第2章，在html中使用JavaScript Html引入外部js脚本 [removed]两个[removed]之间不应放脚本，因为并不会被执行[removed] [removed]标签有一个defer属性可以延迟脚本执行，但是并不保证会按脚本排列顺序执行 ...
最近为了补js的基础，开坑javascript高程，这书基础部分写得很详细很好读，搭配着MDN进行学习理解。 闲下来的时间记录一下边读边做的笔记，大多是以前编程的时候没注意过的基础知识点。 第一章 JavaScript的完整实现...
上半部分的笔记可以浏览JavaScript高级程序设计学习笔记（三） 以下的笔记是书上一些我以前学习的时候，没有太重视的js基础知识，也有一些面试知识的拓展，通过博客回顾并加深理解。 文章目录第五章（下）引用类型...
下面用《javascript高级程序设计》中的例子来做说明，假如现在定义了一个car的对象，它是Object类的实例。像下面这样的： 代码如下: var oCar=new Object(); oCar.color = “red”; oCar.doors = 4; oCar.mpg = 23; ...
2) 文档元素：即<html>元素，文档最外层元素，文档节点第一个子节点。 3) Node类型： ①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。 □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2);...
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
Javascript专为与网页交互而设计的脚本语言，由下列三个部门构造
也远比一般人想象中的要复杂强大的多，在我自己学习的过程中，曾经有过多次震撼，只是常常没有过多久，很多美轮美奂的用法就又模糊起来，希望通过对JavaScript高级程序设计（第3版）的专题学习笔记，能够较为系统的...