事件处理程序（HTML，DOM0,DOM2,IE）
2017-05-04 10:36
399 查看
HTML事件处理程序：
<script type="text/javascript">
function showMessage() {
alert('message');
}
</script>
<input type="text" name="username" >
<input type="text" name="username" onclick="alert(this.value)">
<input type="text" name="username" onclick="alert(value)">
<input type="button" value="click me" onclick="showMessage()">最后一个点击事件，假设showMessage()函数实在按钮下方，页面最底部进行定义。如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。为此，很多HTML事件处理程序都会被封装到try-catch块中，以便错误不会浮出水面，如下面的例子所示：
<input type="button" value="click me" onclick="try(showMessage();)catch(ex){}">这样，如果在showMessage()函数有了定义之前单击了按钮，用户将不会看到JavaScript错误，因为在浏览器有机会处理错误之前，错误就被捕获了。
note:
1）通过event变量可以直接访问事件本身，比如onclick=”alert(event.type)”会弹出click事件。
2）this值等于事件的目标元素，这里目标元素是input。比如 onclick=”alert(this.value)”可以得到input元素的value值。
0级DOM事件处理程序
JS写onlicke=function（）{}函数var oBtn = document.getElementById("myButton");
oBtn.onclick = function () {
alert('thanks');
};DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()、removeEventListener()。所有的DOM节点都包含这两个方法，并且接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。要在按钮上添加click事件处理程序，可以使用下面的代码
var oBtn = document.getElementById("btn1");
oBtn.addEventListener('click',function(){
alert(this.value);
},false);因为第三个参数是false，所以它会在冒泡阶段被触发。
使用DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序。看下面的例子:
var oBtn = document.getElementById("btn1");
oBtn.addEventListener('click',function(){
alert(this.value);
},false);
oBtn.addEventListener('click',function(){
alert(this.id);
},false);这里为按钮添加了两个事件处理程序，这两个事件处理程序会按照添加的顺序出发，因此会获得button的value，在获得其id。
如果第三个参数为true，那么看如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById("btn1");
oBtn.addEventListener('click',function(){
alert('button click');
},true);
var oBD = document.getElementsByTagName('body')[0];
oBD.addEventListener('click',function(){
alert('body click');
},true);
}
</script>
</head>
<body>
<input type="button" value="click me" id="btn1">
</
4000
body>
</html>那么先弹出‘button click’，后弹出“body click”。
那么这里解释一下：
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截取事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。看下图：
很显然事件捕获阶段是从不具体节点（文档）到目标点的，所以当第三个参数为true是，在捕获阶段就调用了事件处理程序。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序是使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：
var oBtn = document.getElementById("btn1");
oBtn.addEventListener('click',function(){
alert(this.value);
},false);
oBtn.removeEventListener('click',function(){
alert(this.value);
},false);看着参数一样，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：
function doSomething() {
alert('hello');
}
var oBtn = document.getElementById("div1");
oBtn.addEventListener('click',doSomething,false);
oBtn.removeEventListener('click',doSomething,false);这个例子没有问题，因为在addEventListener()和removeEventListener()中使用了相同的函数
IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8只支持事件冒泡，所以通过attachEvent()添加的时间处理程序都会被添加到冒泡阶段。<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handlerIE=function(){
alert("helloIE");
}
var handlerDOM= function () {
alert("helloDOM");
}
myBtn.addEventListener("click",handlerDOM,false);
myBtn.attachEvent("onclick",handlerIE);
</script>note:
attachEvent的第一个参数是onclick，而不是addEventListener的click
IE11只支持addEventListener！
IE9，IE10对attachEvent和addEventListener都支持！
TE8及以下版本只支持attachEvent！
删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。
和DOM事件一样，添加的匿名函数将无法删除。
所以为了能删除事件处理程序，代码可以这样写
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handler= function () {
alert("hello");
}
myBtn.attachEvent("onclick",handler);
myBtn.detachEvent("onclick",handler);
</script>note:IE事件处理程序中还有一个地方需要注意：作用域。
使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。
而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。
下面例子会弹出true。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.attachEvent("onclick",function(){
alert(this===window);
});
</script>跨浏览器的事件处理程序
要保证处理时间的代码能在大多数浏览器下一致运行，只需要关注冒泡阶段。第一个要创建的方法是addHandler(),他的职责是视情况分别使用DOM0级方法，DOM2级方法或IE方法来添加事件。这个方法的属于一个名叫EventUtil的对象，addHandler()方法接受三个参数：要操作的元素，事件名称和事件处理程序函数。
与addHandler()对应的方法是removeHandler()，他也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法。
EventUtil的用法如下：
<script type="text/javascript">
var EventUtil = {
addHandler:function (element,type,handler) {
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if (element.atachEvent) {
element.atachEvent('on'+type,handler);
}else {
element['on'+type] = handler;
}
},
removeHandler:function (element,type,handler) {
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if (element.detachEvent) {
element.detachEvent('on'+type,handler);
}element {
element['on'+type] = null;
}
}
}
</script>可以像下面这样使用EventUtil 对象：
var oBtn = document.getElementById("btn1");
var handler = function () {
alert('clicked');
}
EventUtil.addHandler(oBtn,'click',handler);
EventUtil.removeHandler(oBtn,'click',handler);addHandler和removeHandler没有考虑到所有的浏览器问题，例如IE中的作用于问题。但是使用EventUtil进行添加和移除事件已经足够了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
- 事件处理程序DOM0，DOM2，IE的区别总结
- 【读书笔记】DOM0级 DOM2级 IE三种事件处理程序的区别
- DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
- javascript 事件处理 IE和标准dom 的差别
- DOM事件处理程序学习随笔1(IMOOC)
- javascript——事件处理模型（DOM 和 IE）
- IE 11 注册事件处理程序终于回归W3C标准addEventListener
- JavaScript权威指南_141_第15章_脚本化文档_15.9-HTML表单-表单和元素的的事件处理程序
- JavaScript权威指南_163_第17章_事件处理_17.2-注册事件处理程序-设置HTML标签属性为事件处理程序
- IE事件处理程序及跨浏览器解决
- 跨浏览器的事件处理程序//IE、chrome
- 使用HTML页面和一般处理程序模拟ASP.NET WebForms中的事件
- html事件处理程序
- js事件处理（DOM0,DOM2,IE）
- DOM操作--添加事件处理程序
- javascript事件处理------hml事件处理程序、dom0事件处理程序、dom2事件处理程序
- FF,chrome与IE的事件处理程序
- IE事件处理程序与其他浏览器之区别
- JS笔记【归纳】：DOM中的事件处理程序