我这里只是整理一下，作为自己的学习笔记（看原文格式我耳朵都疼了）
JavaScript 中的问题
javascript程序采用了风暴驱动的设计模式，为元素添加了风暴窃听功能。 当触发该元素对应的storm时，就会调用添加的storm窃听函数：storm是javascript与HTML交互的基础。 任何文档或者浏览器窗口中的所有交互都必须通过绑定风暴来完成； 所有浏览器都支持 DOM level 0 的 Storm 处理程序，并且当使用该方法时，storm 处理程序运行在元素的范围内，因此程序中的 this 都指向元素。
如何理解DOM0、DOM2、DOM3
文档对象模型是独立于编程语言和平台的API（应用程序编程接口）。 使用它，程序可以动态访问和更改文档内容、结构或显示样式。
W3C商会早在1988年就开始了DOM标准的制定。W3CDOM标准可分为三个版本：DOM1、DOM2、DOM3。
DOM 级别 1
它主要定义了HTML和XML文档的底层结构。 DOM2和DOM3级别基于此结构引入了更多的交互能力，并且还支持更多的中间XML功能。 因此，DOM2和DOM3级别被划分为很多模块（模块之间存在一定的关系），它们分别描述了DOM的一个特别具体的子集。
此类模块如下： DOM2级核心（DOMLevel2Core）：建立在1级核心的基础上，为节点添加了更多的方法和属性； DOM2级别视图（DOMLevel2Views）：根据文档的样式信息定义不同的视图； DOM2 Level Storm（DOMLevel2Style）：定义如何以编程方式访问和更改 CSS 样式信息； DOM2 级别遍历和范围 (DOMLevel2TraversalandRange)：引入了用于遍历 DOM 文档并选择其中特定部分的新接口。 DOM Level 2 HTML (DOMLevel2HTML)：基于 Level 1 HTML 构建，添加了更多属性、方法和新接口。 DOM3级别还减少了XPath模块和加载和保存（LoadandSave）模块。
DOM Level 2 和 3 的目的是扩展 DOMAPI 以满足操作 XML 的所有要求，同时提供更好的错误处理和特征测量功能。 DOM0是通过onclick直接写在html上的storm； DOM2是通过addEventListener绑定的storm，IE下的DOM2storm是通过attachEvent绑定的； DOM3是一些新的风暴。 0 级 DOM：
一开始浏览器只处理原始的storm模型，并将storm handler设置为js代码字符串作为html的属性值，例如：
在js中，html元素有一个对应的对象。 这个对象的属性对应的是哪个html元素的性质，所以可以用js代码添加风暴窃听功能
document.getElementById("myButton").onclick=function(){alert('谢谢');}
正常情况下，如果storm窃听函数返回一个值并且为false，就会阻止浏览器执行默认操作。 无论你使用html还是jsjavascript 事件模型，都会给文档元素赋予一个函数参数。 当调用storm拦截函数时，它是作为形成storm的元素来调用的，所以this引用的是哪个目标元素（示例中的Input对象）。 从技术上来说，W3C的DOM标准并不支持上述添加风暴窃听功能的最原始形式，这是DOM标准产生之前的风暴模型。 尽管还没有即将出台的 W3C 标准，但这些风暴模型已经得到了广泛的应用。 这就是我们一般所说的0级DOM。
2 级 DOM
DOM Level 1于1998年10月1日成为W3C推荐标准。Level 1 DOM标准没有定义与风暴相关的内容，因此不存在所谓的Level 1 DOM风暴模型。 在2级DOM中，不仅定义了一些DOM相关的操作，还定义了一个风暴模型。 该标准下的风暴模型就是我们所说的2级DOM风暴模型。 2级DOM的风暴传播是在2级DOM中。 当某个节点发生风暴时，会触发目标元素的风暴处理功能，目标的每个祖先节点也有机会处理该风暴。
因为2级DOM的风暴传播分三个阶段发生。
1. 在捕获阶段，风暴从Document对象向上传播到沿着文档树的节点。 如果目标的任何祖先专门注册了风暴窃听函数，那么这些函数将在风暴传播期间运行。
2. 下一阶段发生在目标节点本身，其中将运行直接在目标上注册的适当风暴窃听功能。
3、这是冒泡阶段。 在此阶段，风暴将从目标元素向下传播回 Document 对象（与捕获相反的阶段）。 似乎所有干扰都受捕获阶段控制，但并非所有类型的干扰都是冒泡的。 （0级DOM风暴模型处理没有捕获阶段）
争议对象
当 DOM 上的一场 Storm 被触发时，就会形成一个 Storm 对象事件，其中包含了与 Storm 相关的所有信息。 包括风暴的要素、事件类型以及与特定风暴相关的其他信息。 例如，键盘操作风暴包含键盘的位置信息，鼠标操作风暴包含按下的按键的信息。 所有浏览器都支持事件对象，但形式不同。
【IE的风暴流是从上到内冒泡，netscape是从外部元素捕获到内部元素； 而DOM 2级风暴则规定风暴流包括三个阶段： 1：风暴捕获 2：目标中阶段 3：风暴冒泡阶段（IE8及之前版本不支持DOM风暴流）； 无论在DOM0、DOM2还是DOM3中，storm函数中都会传入storm对象；
点击a后，捕获阶段的风暴将从document->span->a传播，然后在a中，最后在冒泡阶段，风暴将从a->span->document传播。 2级DOM监听功能注册
在2级风暴模型中，可以调用对象的addEventListener()方法为元素设置风暴窃听功能，也就是说可以在2级DOM中通过该API注册的功能被捕获风暴传播的上述三个阶段中的任何一个 风暴的发生（如果使用0级DOM的两个方法参数的风暴窃听函数在捕获阶段无法捕获风暴）。
1、addEventListener第一个参数是String，事件类型的名称，不带前缀on。 例如，要注册点击事件，请传入“click”而不是“onclick”。 它将传递给他一个Event对象，其中包含风暴的详细信息，如果调用该对象的stopPropagation()方法，它将停止风暴的进一步传播（例如，捕获第一阶段的风暴，然后运行风暴窃听函数，其中调用了event。stopPropagation表示风暴将不再通过第二阶段和第三阶段传播）3.第三个参数是boolean，true表示风暴窃听函数可以在任何一个阶段中捕获三个阶段Fengbo（符合Level 2 DOM标准）。 如果为false，则说明风波窃听功能在捕获阶段无法捕获风波（性能与0级DOM相同）。 this 在 2 级 DOM 中的窃听功能
addEventListener添加的函数中的this，标准中并没有规定this必须指向目标元素。 虽然大多数浏览器都是这样实现的，但最终还是取决于浏览器的实现。 当我们需要使用目标元素时请调用event.currentTarget。
2 级 DOM 的事件对象
用addEventListener添加的风暴窃听功能，调用的时候，js会传给他一个Event对象，下面是这个Event对象类型的公共属性：发生的风暴类型，如“点击”、“鼠标悬停”目标：发生Storm的节点可能与currentTarget不同 currentTarget：正在处理storm的节点，如果在捕获阶段和冒泡阶段处理storm，则该属性与target属性不同。应使用该属性而不是风暴拦截函数中的thisstopPropagation()：它可以阻止风暴从当前正在处理它的节点传播。 , clientY: 键盘相对于浏览器左上角的 x 坐标 y 坐标 screenX, screenY: 键盘相对于显示器左上角的 x 坐标 y 坐标
IE风暴模型
1、Event对象没有传递给封包窃听函数，而是通过window对象的event属性来访问Event对象。
2. IEEvent对象类型的常用属性：
与 DOM 类型属性 srcElement 兼容：
与 DOM 目标属性 clientX、clientY 兼容：
兼容 DOM clientX、clientY 属性 cancelBubble：布尔值，设置为 true 并调用 stopPropagation() returnValue：布尔值，设置为 false 并调用 PreventDefault() 这两个参数与 addEventListener 的前两个相同，只是事件名称以 on 为前缀。
IE风暴模型没有捕获阶段，因此调用attachEvent相当于调用addEvetnListener，第三个参数为false：
document.getElementById("myTest").attachEvent("onclick",function(){alert(1)});
相当于
document.getElementById("myTest").addEventListener("click",function(){alert(1)},false);
4.用attachEvent注册的函数将作为全局函数来调用，而不是作为风暴发生的文档元素来调用。 也就是说，this指的是window对象，而不是storm的目标元素。
风暴对象事件下的属性与技巧
由于不同浏览器的storm对象不同，下面列出主要的storm对象的属性和方法；
Storm窃听**（EventListeners，包括addEventListener和IE的attachEvent）**
旧版本的 IE 执行 Javascript 的方式与几乎所有其他浏览器不同。 在IE9之前的版本中，您需要使用attachEvent模块，如下所示：
element.attachEvent('onclick',function(){/*dostuffhere*/});
在大多数其他浏览器（包括 IE9 和更新版本）中，您可以使用 addEventListener，如下所示：
element.addEventListener('click',function(){/*dostuffhere*/},false);
使用这种方法（DOM2 Storm），理论上你可以给一个元素添加无数的波浪。 但在实践中，这会受到客户端视频内存容量和其他性能问题的限制，每个浏览器的情况都不同。
里面的例子都使用了匿名函数。 你还可以为 Feng Bao Eavesdropping 添加函数表达式或闭包：
varmyFunctionReference=function(){/*dostuffhere*/}element.attachEvent('onclick',myFunctionReference);element.addEventListener('click',myFUctionReference,false);
addEventListener的另一个特点是最后一个参数，它将控制冒泡阶段监听的响应。 像我在我的例子中一样，大约有 95% 的机会使用 false。 此参数在 AttachEvent 中或使用 inlineEvents 时没有等效参数。
内联扰动（InlineEvents，即HTML中的onclick=""属性和element.onclick）
在所有支持Javascript的浏览器中，你可以内联一个stormjavascript 事件模型，即像下面的HTML代码：
事实上，它确实可以完成任务，而且简单直接，但大多数有经验的开发人员都会尽量避免使用这样的技术。 另外，这里不能使用闭包或匿名函数（虽然处理程序本身就是匿名函数），但是你的控制范围是有限的。另一种方式是这样的
element.onclick=funtion(){/*dostuffhere/}
其实这相当于内联Javascript（即之前添加HTML标签属性的方式），但是这样你可以有更大的控制范围，并且可以使用匿名函数、函数表达式或者闭包。
内联风暴的一个主要缺点是，与前面提到的风暴监视器不同，您只能指定一个内联风暴。 内联风暴会改变元元素的属性，即当指定多个内联风暴时，之前指定的内联风暴将被覆盖。
作为使用前面 HTML 代码中的标签的反例：
varelement=document.getElementById('testing');element.onclick=function(){alert('didstuff#1');};element.onclick=function(){alert('didstuff#2');};
当你点击这个元素时，你只能看到“Didstuff#2”，因为第二个值覆盖了第一个指定的onclick属性，同时，它也会覆盖HTML中的onclick属性。 两者哪个更好？ *
主要问题是浏览器兼容性和必要性。 您当前是否需要向一个元素添加多个风暴？ 将来还需要吗？ 大多数时候，你需要它。 因此，使用attachEvent和addEventListener是非常有必要的，否则就用内联storm吧。
JQuery 和很多其他 Javascript 框架都封装了针对不同浏览器处理 DOM2 风暴的通用模型（Model），这样你在做跨浏览器兼容的时候就不用担心 IE 的历史遗留问题了。 相同的代码在 jQuery 中是跨浏览器兼容的，只需要这样：
$(element).on('click',function(){/*dostuff*/});
事实上，不要仅仅因为这个就使用框架。 您可以轻松编写一个小部件以与旧版浏览器兼容：
function addEvent(element, evnt, funct){if(element.attachEvent)returnelement.attachEvent('on'+evnt,funct);elsereturnelemt.addEventListener(evnt,funct,false);}//exampleaddEvent(document.getElementById(') myElement '),'click',function(){aler('嗨!');});
风暴处理程序 1. HTML 风暴处理程序 某个元素支持的每种风暴都可以通过使用与相应风暴处理程序同名的 HTML 功能来指定。 该属性的值应该是可以执行的JavaScript代码。
HTML 特定的风暴处理程序有两个缺点。 一是时差问题。 其次是HTML和JavaScript代码是紧密耦合的（如果要替换storm handler，需要改两个地方：HTML代码和JavaScript代码）。
2. DOM0级别的storm handler 要使用JavaScript来指定storm handler，首先必须获取要操作的对象的引用。
每个元素（包括window和document）都有自己的storm handler属性，一般都是大写字母，比如onclick。 通过将这些属性的值设置为函数，您可以指定风暴处理程序：
varbtn=document.getElementByIdx_x("myBtn");btn.onclick=function(){alert("点击");}
使用 DOM 0 级方法指定的 Storm 处理程序被视为基本技术。 换句话说，程序中的this指的是当前元素。 例如：
varbtn=document.getElementByIdx_x("myBtn");btn.onclick=function(){alert("this.id");}
要删除 DOM 0 级风暴处理程序，只需执行以下操作： btn.onclick=null;//删除风暴处理程序。 将风暴处理程序设置为空后，单击按钮时不会发生任何情况。 如果使用 HTML 指定事件处理程序，则 onclick 属性的值是一个包含同名 HTML 属性中指定代码的函数。 通过将相应的属性设置为null，您还可以删除这些方法指定的风暴处理函数。
3. DOM2 级storm handler（IE 不支持） **DOM2 级storm 定义了两个方法来处理指定和删除storm handler 的操作：addEventListener() 和removeEventListener()。
varbtn=document.getElementByIdx_x("myBtn");btn.addEventListener("click",function(){alert("this.id");},false);
使用 DOM2 级别方法添加 Storm 处理程序的主要用途是可以添加多个 Storm 处理程序。 例如：
varbtn=document.getElementByIdx_x("myBtn");btn.addEventListener("click",function(){alert("this.id");},false);btn.addEventListener("click",function(){alert (“helloworld”);}, false);
删除风博应用。 例如：
varbtn=document.getElementByIdx_x("myBtn");varhandler=function(){alert(this.id);}btn.addEventListener("click",handler,false);//其他代码 btn.removeEventListener("click ",处理程序，假）； //有效的！
注意：匿名函数无法删除。
4. IE风暴处理程序 IE实现了与DOM中类似的方法：attachEvent()和detachEvent()**
例如：
varbtn=document.getElementByIdx_x("myBtn");btn.attachEvent("onclick",function(){alert("this.id");});
注意：attachEvent()的第一个参数是onclick，而不是click。 同时，这里的this不再是作用域内的元素，而是window对象。 同样，要删除风暴处理函数，请使用 detachEvent() 函数。
风暴型
1、DOM2级事件类型
（1）UI（user interface，用户界面）事件，在用户与页面上的元素交互时触发。
（2）鼠标事件，当用户通过鼠标在页面上执行操作是触发。
（3）键盘事件，当用户通过键盘在页面上执行操作是触发。
（4）HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发。
（5）变动（mutation）事件，当底层DOM结构发生变化时触发。
2.UI风暴
(1) DOMActive：表示该元素已经被用户操作（通过键盘或鼠标）激活。
(2) DOMFocusIn：表示元素已经获得焦点；
(3)DOMFocusOut：表示元素失去焦点。 支持这些 UI 干扰的浏览器很少。
我们不建议将其用于此目的。
3.鼠标问题
(1)键盘风暴触发顺序：mousedown-mouseup-click-mousedown-mouseup-click-dbclick。
(2) 顾客区坐标位置
vardiv=docment.getElementById("myDiv");EventUtil.addHandler(div,"click",function(event){event=EventUtil.getEvent(event);alert("客户端坐标："+event.clientX+","+event .clientY);});
(3)屏幕坐标位置
vardiv=document.getElementByIdx_x("myDiv");EventUtil.addHandler(div,"click",function(event){event=EventUtil.getEvent(event);alert("屏幕坐标："+event.screenX+","+event .screenY);});
4.键盘风暴（DOM 0级风暴支持）
(1) 按钮风暴共有三种：keydown、keypress、keyup。
(2)按键编码，事件对象的keyCode属性会包含按键上特定按键对应的编码。 请检查表中相应的密钥代码。
5. HTML风暴加载、卸载、中止、错误、选择、更改、提交、重置、调整大小、滚动、聚焦、模糊。 大多数 HTML 混乱都与窗口对象或表单控件有关。
6. 变革与风暴（略）
