跨浏览器之事件处理程序

上次说到了JS中事件处理程序在DOM0级和DOM2级和IE中是不同的,每个都有自己的添加和移除事件处理程序的形式。

那要将这些差异进行统一化。避免这种差异。对于顺序问题,我们应该要先将最经常使用的放在最上面把兼容性最好的放在最下面,也就是实现向后兼容。

 1 function addEvent(obj,type,handle){
 2     if(obj.addEventListener){//兼容DOM3级
 3         obj.addEventListener(type,handle,false);
 4     }
 5     else if(obj.attachEvent){//兼容DOM0级
 6         obj.attachEvent("on"+type,handle);
 7     }
 8     else{//IE
 9         var type = "on"+type;
10         obj.type = handle;
11     }
12 }
13
14 function removeEvent(obj,type,handle){
15     if(obj.removeEventListener){//兼容DOM3级
16         obj.removeEventListener(type,handle,false);
17     }
18     else if(obj.detachEvent){//兼容DOM0级
19         obj.detachEvent("on"+type,handle);
20     }
21     else{//IE
22         var type = "on"+type;
23         obj.type = null;
24     }
25 }

这端代码能实现在各种浏览器下处理好事件处理程序。

时间: 2024-12-14 02:51:00

跨浏览器之事件处理程序的相关文章

处理跨浏览器的事件处理程序

事件:事件是用户或浏览器自身执行的某些动作,例如 : click   load   mouseover 事件处理程序:用于响应某个事件的函数 在不同的浏览器,DOM中,事件处理程序是响应某个事件的函数 DOM0:中事件处理函数  event:onclick=function              删除程序:event:onclick=null: DOM 2:addEventListener()            removeEventListener(); 他们都接受三个参数,要处理的事

跨浏览器的事件处理程序——事件处理程序、事件对象差异

为了以跨浏览器的方式处理事件,不少开发人员会使用能够隔离浏览器差异的javascript库,本文从事件处理程序.事件对象差异出发,演示开发最适合的事件处理方法 基本名词解析: 事件 用户或浏览器自身执行的某种动作 事件流 从页面中接收事件的顺序,,IE的事件流指的是事件冒泡流,而Netscape Communicator的事件流是事件捕获流 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档) 事件捕获 不太具体的节点应该更早接收到事

跨浏览器的事件处理程序

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> Document </title> </head> <body> <a href='#' id='btn'>button</a> </body> </html> <script&

跨浏览器【事件处理程序】和【事件对象】

和require.js没关系,只是最近看了拿来练练手~~ 1.html(引用require.js模块) <!DOCTYPE html> <html> <head> <style type="text/css"> #div{ background-color: yellow; width:200px; height:200px; opacity: 0.5; } #a{ display: block; background-color: gr

009天之跨浏览器的事件处理程序

为了以?跨浏览器方式处理事件,我们可以使用一些可以隔离浏览器差异的js库.由于业务需求,有时候我们需要写一些我们自己封装一些兼容代码. 比如创建一个addHandler(),它的职责是视情况分别使用DOM0级方法,DOM2级方法或IE方法来添加事件.然后addHandler()方法接受三个参数:要操作的元素,事件名称,和事件处理程序函数. 与addHandler();对应的方法是removeHandler(),它也接受同样的参数,这个的职责是移除之前添加的事件处理程序.无论这个事件是采取什么方式

如何写一个跨浏览器的事件处理程序 js

如何 写一个合格的事件处理程序,看如下代码: EventUtil可以直接拿去用 不谢 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <input type="button" name="ids" id="ids" value="value"> <sc

DOM事件处理程序-事件对象-键盘事件

事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netscape  ---事件捕获流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 使用事件处理程序: 1. HTML事件处理程序 <input type="button" value="按钮" id="btn" onclick=&q

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

探究JavaScript中的五种事件处理程序

我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数.  我们又把事件处理程序称为事件侦听器.  事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在JavaScript中大致有五种,下面会根据这五种