DOM事件模型与Internet explorer事件模型之绑定机制
不同浏览器（chrome、Safari、Firefox、Opera、Internet Explorer）有自身独有的事件机制，其中属微软的Internet Explorer最“另类”。
就拿事件绑定方法来说吧！
为了保证有更好的跨浏览器特性，通常推荐采用与浏览器无关的事件绑定方法。
绑定HTML元素属性
这种事件绑定方式简单易用，如：<form method="get" handler(this)">。
绑定事件处理器时需要直接修改HTML页面代码，会带来如下几个坏处：
直接修改HTML元素属性，增加了页面逻辑的复杂度。
开发人员需要直接修改HTML页面，不利于团队协作开发。
但是可以在调用javaScript函数时传入参数，典型的就是传入this、event等特殊意义的参数。
绑定DOM对象属性
Document.forms[n].onsubmit=check;
绑定到DOM对象属性时，该属性值只是一个javaScript函数的引用，因此千万不要在函数后面添加括号——一旦添加括号，那就变成了调用该函数，于是将该函数返回值赋给DOM对象的onclick等属性。
DOM模型的事件机制中，提供的事件绑定机制
objectTarget.addEventListener(“eventType”,handle,captureFlag)该方法为objectTarget绑定事件处理器handler，其第一个参数是事件类型字符串（将前面的事件属性去掉前缀”on”,例如click、mousedown、keypress等）；第二个参数是事件处理函数；第三个参数用于指定监听事件传播的哪个阶段（true表示监听捕获阶段，false表示监听冒泡阶段）。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> DOM事件机制 </title>
</head>
<body>
<!-- 将测试的div元素 -->
<div id="test">
<!-- div元素的子元素：按钮 -->
<input id="testbn" type="button" value="单击我" />
</div>
<hr />
<div id="results"> </div>
<script type="text/javascript">
// 事件处理函数
var gotClick1 = function(event)
{
// 该事件处理函数简单输出事件的当前对象
document.getElementById("results").innerHTML +=
"事件捕获阶段: " + event.currentTarget + "<br />";
}
// 事件处理函数
function gotClick2(event)
{
// 该事件处理函数简单输出事件的当前对象
document.getElementById("results").innerHTML +=
"事件冒泡阶段：" + event.currentTarget + "<br />";
}
// 为testbn按钮绑定事件处理函数（捕获阶段）
document.getElementById("testbn")
.addEventListener("click" , gotClick1 , true);
// 为testbn按钮绑定事件处理函数（冒泡阶段）
document.getElementById("testbn")
.addEventListener("click" , gotClick2 , false);
// 为按钮所在的div对象绑定事件处理函数（冒泡阶段）。
</script>
</body>
</html>与addEventListener()方法相对应，DOM也提高了一个方法用于删除事件处理器，该方法为removeEventListener
objectTarget.removeEventListener(“eventType”,handler,captureFlag)
该方法为objectTarget删除事件处理器handler。
Internet explorer支持两种自己独有的事件绑定方法。这两种方法都不需要在HTML元素中增加额外的属性。
在internet explorer 4.0以及更新的版本中，microsoft扩展了<script>元素，可以将它包含的脚步语句和某个元素的某个事件类型进行绑定。完成绑定的两个属性是for和event。
For属性的值必须是HTML文档中某个元素的id属性值，该属性唯一地标识了该HTML元素。Event属性值是该元素所支持的事件名称，如onmouseover、onclick等。一旦为该script标签指定了这两个属性，就表明该标签内的所有脚本绑定了该元素的对应事件。
注意：在这种绑定机制下，事件处理的脚本语句并不在函数中，而是在<script>元素内。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 使用script for绑定事件处理器 </title>
</head>
<body>
<!-- 简单的按钮 -->
<input type="button" id="bn1" name="bn1" value="单击我" />
<!-- 使用script for将下面脚本绑定到bn1按钮的 -->
<script for="bn1" event=" type="text/javascript">
alert("您单击了我");
</script>
</body>
</html>attachEvent方法进行绑定
DOMObject.attachEvent（“eventName”,functionReference）
eventName的值是事件的名称，例如onmousedown；functionReference的值是一个函数引用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 使用attachEvent绑定事件处理函数 </title>
</head>
<body>
<input type="button" id="bn1" name="bn1" value="单击我" />
<script type="text/javascript">
var test = function()
{
alert("单击按钮");
}
//使用attachEvent执行事件绑定
document.getElementById("bn1").attachEvent(" , test);
</script>
</body>
</html>一般情况，一个DOM对象、一种事件最多只能绑定一个事件处理器。但attachEvent()方法绑定事件处理器时，一个DOM对象，一种事件可以绑定多个事件处理器。
attachEvent()方法对应的是detachEvent()方法，该方法用于删除一个事件处理器
DOMObject.detachEvent(“eventName”，functionReference);
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
