标签：意义 htm script 操作 替代 blog type dom节点 执行
1.HTML事件处理程序
某个元素支持的某种事件，可以通过一个与相应事件处理程序同名的HTML特性指定。这个特性的值应该是能够执行的JS代码。例如：按钮单击是要执行一些js代码，可以像下面：
<input type="button" value="click me" onclick="showMessage()" />
在js中就可以像下面一样处理：
<script>
function showMessage(){
alert("hello function");
alert(this == window) // true
}
</script>
此时showMessage中的this指向的window，但是showMessage函数可以被多个元素同时调用。
但是此方法有的缺陷就是js和html耦合在一起，如果要更换事件处理程序，需要改html和js两个地方。所以很多人喜欢用dom事件处理程序。
2. DOM0级事件处理程序
通过js指定事件处理程序的方式，就是将一个函数赋值给一个事件处理程序的属性。
每个元素（包括window和document）都有自己的事件处理程序的属性，这些属性通常全部小写，就像onclick，将这个属性的值设置为一个函数，就可以指定事件处理程序。如下：
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); btn2.onclick = function(){ console.log(this); } </script> </body> </html>
上面的this输出的结果是：<input type="button" value="click me2" id="btn2">，说明dom0级事件处理程序中的this指向的是当前元素本身，而不是windows，通过this可以访问元素的任何属性和任何方法。
3.DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法，并且接受3个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true，则表示在捕获阶段，是false则表示在冒泡阶段。
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); //addEventListener接受3个参数:要处理的事件名，作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true，则表示在捕获阶段，是false则表示在冒泡阶段 btn2.addEventListener(‘click‘,function(){ console.log(this); }, false); </script> </body> </html>
上面代码输出的结果和dom0级代码输出的结果一样：<input type="button" value="click me2" id="btn2">，说明dom2级事件处理程序中的this指向的是当前元素本身，而不是windows。
注意：addEventListener()方法只能通过removeEventListener()方法来移除。
但是使用removeEventListener()方法移除事件的时候需要注意的一点：
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); btn2.addEventListener(‘click‘,function(){ console.log(this); }, false); btn2.removeEventListener(‘click‘,function(){//没有用 console.log(this); }, false); </script> </body> </html>
上面的方法移除click事件是没有用的，为什么呢？因为addEventListener和removeEventListener的第二个参数需要同一个函数，而上面的代码看似是同一个函数，其实不然，它们是功能相同的，但是是不同的匿名函数。如果需要正真移除事件处理程序，需要向下面这样：
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); var handler = function(){ console.log(this); } btn2.addEventListener(‘click‘, handler, false); btn2.removeEventListener(‘click‘,handler, false); </script> </body> </html>
像上面一样，就可以保证addEventListener和removeEventListener的第二个参数是同一个函数。
attachEvent()与detachEvent()
在早期的IE浏览器，如：IE8中，没有实现addEventListener()和removeEventListener()，但提供了两个替代方法attachEvent()和detachEvent()。由于Microsoft当前最新的系统Windows 10中，已放弃IE被edge浏览器替代，所在attachEvent()和detachEvent()已没有意义。
上面的内容基本上是从《JavaScript高级程序设计》摘抄，在加上自己的一些理解。如果有错误，欢迎指正。
JS：Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序
标签：意义 htm script 操作 替代 blog type dom节点 执行
原文地址：http://www.cnblogs.com/ycherry/p/7281075.html
