《HTML教程》-7.5教学材料

7.5.1事件处理中的兼容性处理先来回顾一下事件处理中有哪些不同。标准事件模型和IE事件模型主要存在以下差异：◆事件传播机制不同——标准事件模型事件传播分为3个阶段：捕捉阶段、目标阶段和冒泡阶段，而IE模型事件传播只有冒泡一种形式。

◆事件对象不同——这里有两层含义，第一是事件对象的传递方式不同：标准事件模型中事件对象在事件发生时生成，并以参数的形式传递给事件处理函数；而IE模型中事件对象以全局对象event的形式出现，而不作为参数进行传递。第二是对象的属性和方法不同（见7.3.1节）。

◆事件注册和注销方式不同——标准事件模型用addEventListener()和removeEventListener()注册和注销事件处理函数，而IE模型的浏览器使用attachEvent()和detachEvent()注册和注销事件处理函数。首先介绍如何编写跨浏览器注册/注销事件的应用程序。1、跨浏览器注册/注销事件跨浏览器注册事件/注销事件首先要区分标准模型的浏览器还是IE浏览器。区分的方法：查看元素是否包含addEventListener属性或者attachEvent属性，如果包含addEventListener属性则为标准模型的浏览器，否则为IE浏览器。

◆若为标准模型的浏览器则调用addEventListener()注册事件处理函数；

◆若为IE浏览器则调用attachEvent()注册事件处理函数；

◆如果两者都不是，则使用添加元素事件处理属性的方式注册事件处理函数，这种方式可适应几乎100%的浏览器。清单7-1跨浏览器注册事件的函数functionaddEvent(elem,eventType,func){ if(elem.addEventListener){ elem.addEventListener(eventType,func,false); }elseif(elem.attachEvent){ elem.attachEvent("on"+eventType,func); }else{ elem["on"+eventType]=func; }}只要进行事件处理就需要用到这个事件注册函数，所以把它（addEvent()）放到了随书源代码的js目录下的utils.js文件中，后面会经常用到这个函数。下面介绍跨浏览器注销事件的函数，方法与注册事件处理函数的方法类似。只不过这里是检查removeEventListener和detachEvent属性。

◆如果元素存在removeEventListener属性则调用removeEventListener()方法注销事件处理器（或者称为事件处理函数）；

◆如果存在detachEvent属性则调用detachEvent()方法注销事件处理器；

◆如果两者都不能起作用，就采用将元素的事件处理属性（"on"+事件类型的格式）置为空的办法注销事件处理程序。完整代码如清单7-2所示。清单7-2跨浏览器注销事件处理器的代码functionremoveEvent(elem,eventType,func){ if(elem.removeEventListener){ elem.removeEventListener(eventType,func,false); }elseif(elem.detachEvent){ elem.detachEvent("on"+eventType,func); }else{ elem["on"+eventType]=null; }}与addEvent()一样，这段代码也在随书源码的js文件夹中的utils.js文件中。这个utils.js文件将随着学习的不断深入添加更多的内容，学习完本书后大家可以添加一些其他的功能，并将它用在实际项目中。另外，这个addEvent()函数没有考虑在哪个阶段处理事件，也就是没有标准模型的useCapture参数，而是默认的把它置为了false，也就是默认在冒泡阶段处理事件。大家可以把这个addEvent()函数再添加一个参数，由用户指定在哪个阶段处理事件，这个作为练习留给读者来完成。2、事件对象兼容性处理

两种事件处理模型中事件对象的差异体现在事件对象的传递方式和事件对象自身的属性和方法上，想要编写兼容处理的程序，则必须兼顾这两方面的差异。现把两种对象的差异总结如下，如表7-6所示。表7-6标准事件对象与IE事件对象的属性和方法的差异属性/行为IE事件对象标准事件对象目标元素（事件源）srcElementtarget前一元素fromElementrelatedTarget后一元素toElementrelatedTarget取消冒泡cancelBubblestopPropagation()取消默认处理returnValuepreventDefault()事件对象的兼容性处理首先要处理事件对象的传递差异，标准模型中事件对象作为事件处理器（函数）的参数传递给事件处理函数，而IE模型的浏览器则把事件对象作为全局对象使用（见7.3节），所以获取事件对象的方式不同，这是首先要解决的问题。利用JavaScript逻辑或（||）运算的特性，可以采用以下方式统一两种对象获取方式：functioneventHandler(eventObj){ varevt=eventObj||window.event; //evt即获取到的事件对象}JavaScript的逻辑或运算符比较特殊，eventObj和window.event哪一个存在（即为真）则返回哪个对象，而不是仅仅返回一个布尔值。通过这一性质可以把两种对象传递方式统一起来。获取事件对象之后，就是要处理表7-6中的这些不同的属性和方法了。有了上面的处理事件对象传递不同的经验，你可能马上就会想到仍然使用JavaScript的逻辑与的特性，下面给出处理这些差异的代码。如清单7-3所示。这里需要说明的是，stopPropagation()和preventDefault()两个函数名也可以用作事件对象的属性（名）。并不是所有的这些差异都需要同时处理，实际应用中根据需要截取相应的代码即可！7.5.2事件处理中参数的传递问题事件处理器（函数）只能接收一个参数，那就是事件对象。如果需要传递其他额外的参数该怎么办呢？这是一个比较实际的问题，往往在处理发生的事件时，需要其他的参数，这时就不可避免的遇到这个问题。对于这个问题通用的做法是注册事件时使用匿名函数，然后在这个注册的匿名函数中调用带有其他参数的函数来处理这一事件。这样说起来比较抽象，来看个例子就明白了，这个方法就是下面的方法一。为了说明这一问题，使用这样一个例子。实例中允许用户在网页中输入两个数值，单击“=”按钮时，计算这两个数值的积。实现这样的功能有许多方法，下面给出两种方法，并对两种方法进行对比分析，指出其中的优缺点。方法一：在事件处理中传递参数在这一做法中，首先声明一个用于实现乘法的函数multi，然后在事件处理器中获取用户输入的值，再调用multi函数计算两个值的积，最后输出计算结果。具体代码如清单7-4所示。代码说明如下图（1、匿名事件处理函数；（2）在匿名事件处理器中以调用函数的方式传递额外参数。）：方法二：直接在事件处理器中计算

这种方法和上一个方法类似，只不过是把调用multi()函数计算结果修改成直接计算结果，代码如清单7-5所示。只给出与清单7-4所示代码不同的部分。清单7-5直接在事件处理器中计算乘积addEvent(document.getElementById('multi'), 'click', function(){varsummand=document.getElementsByName('summand')[0].value; varaddend=document.getElementsByName('addend')[0].value; varresult=summand*addend;//直接计算两数的乘积，而不是调用multi函数 alert(summand+'*'+addend+"="+result); });两者比较同样可以得到相同的结果，方法二没有方法一的函数调用，执行速度