手记

DOM事件模型与Internet explorer事件模型之绑定机制荐

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);


0人推荐
随时随地看视频
慕课网APP