《HTML教程》-7.4教学材料

默认系统事件处理可以通过preventDefault()方法（标准事件模型，见表7-3），或者将returnValue置为false（见7.3.1节）来阻止系统的默认事件处理。用户自定义事件处理包括两个方面：事件处理函数注册和注销事件处理函数。7.4.1注册事件处理函数

1、标记属性注册处理事件这是最简单的注册事件处理函数的方法，语法是在HTML标记中增加事件处理属性，并将属性值置为要调用的函数，格式如下：<inputtype="button"onclick="clickHandle()"/>onclick是input标记的事件处理属性，它是由“on”+事件名称（常见事件如表6-6所示）构成的。注意这里在事件名称前面加了一个英文单词“on”，不论是什么事件都加这个“on”，如mouseover事件的事件处理属性为onmouseover，keydown事件的事件处理属性为onkeydown等等，这一点必须注意。还有一点需要注意的是，这样事件处理注册方法可以同时注册多个事件处理函数。它的属性值为clickHandle()，为函数调用的形式，而不只是函数名，这与JavaScript属性注册处理事件是不同的。但是请注意：根据内容、样式和动作相分离的原则，不推荐使用这种方式注册事件处理函数。2、JavaScript属性注册处理事件每个DOM节点对象都有一个事件处理属性，与上面的标记事件处理属性是一样的，用这个事件处理属性也可以注册函数，格式如下：document.getElementById("mybutton").onclick=clickHandle;其中，mybutton是要注册事件处理函数的按钮的id属性（值），document.getElementById("mybutton")的作用是获得要注册事件处理函数的按钮。获得按钮之后，通过onclick单击处理属性注册处理函数clickHandle()——这里的事件处理属性也是由“on”+事件名称构成的。换句话说事件处理属性都是以“on”开头——这里要注意的是这里等号右侧只是函数名，而不是函数调用，即没有函数名后面的圆括号。还要注意：这种事件处理注册方法一次只能注册一个事件处理函数。因为这种注册方法相当于对事件处理属性赋值，如果注册一个新的事件处理函数，则相当于对这个属性重新赋值，那么新的值（事件处理函数）将取代原来的值（事件处理函数）。3、事件监听器注册事件标准事件处理模型中使用addEventListener()函数为DOM节点注册事件，而且可以注册多个事件处理函数，比如对于单击事件可以一次注册两个事件处理函数。addEventListener()函数原型如下：element.addEventListener(event,function,useCapture);参数说明：◆element：要注册事件处理函数的DOM节点元素；◆event：要处理的事件名称（常见事件如表6-6所示，注意是没有“on”的）；◆function：事件处理函数名称，而不是函数调用（即没有函数名称后面的圆括号）；◆useCapture：布尔值，用于指定是否在捕捉阶段处理事件，默认值为false，即只在冒泡阶段处理事件。为可选参数。IE事件处理模型（现在IE9及以上版本已经支持标准事件模型的事件注册方法，即addEventListener()）中使用attachEvent()函数注册事件处理函数，原型如下：element.attachEvent(type,listener);参数说明：◆element：要注册事件处理函数的DOM节点元素；◆type：要处理的事件类型。注意这里是“on”+事件名称的格式！◆listener：事件处理函数名称。注意是函数名称，而不是函数调用。为了兼容低版本的IE浏览器attachEvent()函数还会存在相当长的一段时间，到目前为止几乎是每讲述一个重点就要区分标准模型和IE模型，那么如何才能编写兼容两种浏览器的程序就是一个不可回避的问题，这一问题将在7.5.1节中进行讨论。7.4.2注销事件处理函数

有些时候不再需要某个或某些事件处理函数，要取消它们该怎么办呢？那就是注销事件处理函数，事件处理函数注销后和原来的事件将再也没有任何关系，再次触发事件也不会调用处理函数。三种注册事件处理函数的方法对应的注销方法不同，现分述如下。1、注销标记属性注册的事件处理函数

用标记属性注册的事件处理函数的注销十分简单，就是直接将将注册事件处理的属性删除即可。如：<inputtype="button"onclick="clickHandle()"/>要注销单击事件（click事件），直接将onclick属性删除就可以了。删除事件处理属性后的代码如下：<inputtype="button"/>这样单击事件处理函数就被注销了，即使再单击该按钮也不会有任何的响应。2、注册JavaScript属性注册的事件使用JavaScript属性注册的事件处理函数，注销时仍然采用对该属性赋值的方式予以注销，此时要赋的值是一个null而不是事件处理函数。如要注销下面mybutton按钮的单击事件处理函数，document.getElementById("mybutton").onclick=clickHandle;只需要进行下面的赋值即可：document.getElementById("mybutton").onclick=null;3、注销事件监听器注册的函数使用addEventListener()注册的函数用removeEventListener()函数注销，使用attachEvent()函数注册的事件处理函数用detachEvent()函数注销。两个注销函数的原型如下：element.removeEventListener(event,function,useCapture);参数说明：◆element：是注销事件处理函数的DOM节点；◆event：要注销处理函数的事件名称；◆function：要注销的事件处理函数名称；◆useCapture：要注销的事件处理函数所处的传播阶段。true表示注销捕捉阶段的处理函数，false表示注销冒泡阶段的事件处理函数。其中，false为默认值。该参数为可选参数。element.detachEvent(type,listener);参数说