原文地址: JS 跨浏览器的dom事件封装
上次的 《JS面试题 跨浏览器的事件处理函数的绑定和解绑定》一文中提供的跨浏览器事件处理函数的绑定中缺失了对event对象的跨浏览器处理。这里对它进行补完。 在兼容DOM的浏览器中,无论使用DOM0级(element.onXXX=handler)还是DOM2级(element.addEventListener)来绑定事件处理函数,event对象都会作为事件处理函数的参数被传入。然而在IE中,使用DOM0级方法绑定事件处理函数却没有将event对象当做参数传入,而是作为window对象的一个属性存在。因此,跨浏览器获得一个事件对象需要如下的代码 标准的event对象包含以下属性及方法 而IE的事件对象包含如下属性 基于上述对比,需要兼容处理的属性和方法有 event.target 和 event.srcElement ,event.stopPropogation 和 event.cancelBubble ,event.preventDefault 和 event.returnValue 。 虽然IE中的event对象与标准的event对象还有很多不一致的接口(属性,方法),但是不是每个事件处理函数都会用到所有的属性和方法,如果在compatibleEvent方法中做更多的兼容处理就有可能不会被用到而消耗了不必要的内存,所以只是提供几个简单的兼容是更好的选择。 这样在LIZ.dom.addEventListener的处理中对向其注册的事件处理函数传入使用
1
element.onclick =
function
(event){
2
event = event || window.event;
3
}
属性/方法
类型
读写
说明
bubbles
Boolean
只读
表明事件是否会冒泡
cancelable
Boolean
只读
表明是否可以取消事件的默认行为
currentTarget
Element
只读
即绑定该事件处理函数的元素,不一定是事件的目标元素,因为事件可以冒泡至绑定了相应事件的上层元素
eventPhase
Integer
只读
调用事件处理程序的阶段:1.捕获阶段 2.处于目标 3.冒泡阶段
type
String
只读
事件类型
target
Element
只读
事件的目标元素,例如点击的dom中最深层次的元素
preventDefault
Function
只读
取消事件的默认行为的方法。只有事件的cancelable为true时调用此方法才有效。
stopPropogation
Function
只读
取消事件的进一步冒泡或捕获。
属性/方法
类型
读写
说明
cancelBubble
Boolean
读写
默认值为false,将其设置为true就可以阻止事件冒泡。
returnValue
Boolean
读写
默认为true,将其设置为false就可以取消事件的默认行为,但没有其他属性可以说明是否有效。
type
String
只读
事件类型
srcElement
Element
只读
事件的目标元素,与DOM事件中的target属性一样。
可以提供一个跨浏览器的事件对象类型来处理兼容问题。可以提供一个方法来简单的处理event的兼容性。使用之前所说的创建一个跨浏览器的事件对象类型的话存在很多弊端,一方面创建了新的对象消耗过大,一方面要使用其它事件特有的值还需要再调用方法获取原事件对象,这一方法创建了闭包会造成一些内存消耗。
1
LIZ.dom.Event =
function
( event ){
2
event = event || window.event;
3
this
.type = event.type;
4
this
.target = event.target || event.srcElement;
5
6
this
.preventDefault =
function
(){
7
if
( event.preventDefault ){
8
event.preventDefault();
9
}
else
{
10
event.returnValue =
false
;
11
}
12
};
13
14
this
.stopPropogation =
function
(){
15
if
( event.stopPropogation ){
16
event.stopPropogation();
17
}
else
{
18
event.cancelBubble =
true
;
19
}
20
};
21
22
//为提供一点灵活性,此处提供一个getEvent方法返回真正的event对象
23
this
.getEvent =
function
(){
24
return
event;
25
};
26
27
return
this
;
28
};
1
/**
2
* 在LIZ.util中创建一个处理event兼容性的方法
3
* 只需要对IE的event对象进行兼容处理,向标准靠拢
4
* 给IE的event对象添加其本身不具备的标准的属性和方法
5
*/
6
LIZ.util.compatibleEvent =
function
( event ){
7
event = event || window.event;
8
9
if
(
typeof
event.target ===
'undefined'
){
10
event.target = event.srcElement;
11
}
12
13
if
(
typeof
event.stopPropogation !==
'function'
){
14
event.stopPropogation =
function
(){
15
this
.cancelBubble =
true
;
16
};
17
}
18
19
if
(
typeof
event.preventDefault !==
'function'
){
20
event.preventDefault =
function
(){
21
this
.returnValue =
false
;
22
}
23
}
24
25
return
event;
26
};
LIZ.dom.Event类型LIZ.util.compatibleEvent方法处理过的event对象,就可以在事件处理函数中使用跨浏览器的事件对象了。
1
addEventListener :
function
(element, type, handler){
2
var
observer =
this
.getData(element,
'observer'
),
3
proxyHandler =
function
(event){
4
observer.fire( LIZ.util.compatibleEvent( event ) );
5
};
6
if
( !observer || !(observer
instanceof
LIZ.patterns.Observer) ){
7
observer =
new
LIZ.patterns.Observer(element);
8
this
.setData(element,
'observer'
, observer);
9
}
10
if
(
typeof
observer[type] ==
'undefined'
){
11
if
( element.addEventListener ){
12
element.addEventListener(type, proxyHandler,
false
);
13
}
else
if
( element.attachEvent ){
14
element.attachEvent(
'on'
+type, proxyHandler);
15
}
else
{
16
element[
'on'
+type] = proxyHandler;
17
}
18
}
19
observer.addListener(type, handler);
20
}
相关推荐
JavaScript中BOM和DOM详解 目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...
//定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) {...
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果。代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if ...
DOM元素都有一些标准事件,一般使用时只要使用onclick=function的方式就可以了,但是当需要为DOM元素添加多个事件,删除事件,或在用Javascript封装控件的时候,为封装的控件添加自定义事件的时候,onclick=function...
js常用函数封装,cookie、dom操作、自适应浏览器前缀、函数节流等
由于事件在每个浏览器中都可用,react.js 组件不需要附加到任何库方法来与页面的其余部分进行通信,这使得组件 100% 封装和可重用。 Flux-Reactions只是减少跨浏览器分派自定义事件样板的实用程序,而不是完整的 ...
第3课 JavaScript DOM事件 为页面中的元素绑定键盘或鼠标事件,从而可以触发和实现我们想要的交互效果 第4课 JavaScript BOM基础 学习浏览器对象模型“BOM”,可以对浏览器窗口进行访问和操作,与浏览器“对话” ...
了解浏览器DOM API以及如何使用它们在Web开发中起着重要作用。 一个介绍API,众所周知的问题,最受欢迎的问题的网站可能会非常有用。产品特点 没有外部库。 仅本机浏览器的API 小而易懂的例子 现场演示 包括许多...
JavaScript语言由3部分组成,分别是ECMAScript、BOM和DOM,其中ECMAScript是JavaScript语言的核心,而Web API包括BOM和DOM两部分。;;API:应用程序编程接口,是一些预先定义的函数,这些函数是由某个软件开放给开发...
Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的、可扩展的网络应用。Node.js采用事件驱动和非阻塞I/O模型,使其变得轻微和高效,非常适合...
Jaadi 是一个简单易用的浏览器存储技术的抽象 API,支持 DOM、W3C 和浏览器专有的存储技术。Jaadi 提供基本的 CRUD 操作的封装。 示例代码: var dom = Jaadi.createInstance("dom") dom.put("a",10); //put...
第2章 浏览器中的JavaScript 2.1 嵌入网页的可执行内容 2.2 赏心悦目的特效 2.3 使用JavaScript来与用户交互 2.4 绕开脚本陷阱 2.5 总结 第3章 开发环境和调试方法 3.1 我能用什么来编写脚本--...
jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4): 分类 事件方法 描述 鼠标 click...
1)事件对象:当浏览器执行事件的时候,会将所有与事件相关的内容(鼠标位置,触发的目标等)封装为一个对象,并且在触发事件的函数,在事件函数中进行传递 Event 常见属性: clientX clinetY 鼠标相对客户端的位置 ...
它还给出了 Shadow DOM 带来的模块化/封装的一个小例子,因为普通 CSS 不会影响 Shadow DOM 元素。 在 js/main.js 中 应用程序命名空间已创建。 它也是一个简单的 JavaScript 命名空间,应用程序架构也附在它上面。...
实现DIV与DIV之间的连线,工程...我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
1、js的简介JavaScript 是⼀种客户端脚本语⾔(脚本语⾔是⼀种轻量级的编程语⾔,语法和java类似。...(因为⾯向对象需要具有封装、继承、多态的特征)JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM、BOM....
使用Shady DOM polyfill时有关CSS封装的注意事项如果打算使用Shady DOM *.vue ,建议在*.vue文件中使用代替<style scoped> ,因为它不像Shadow DOM那样提供真实的样式封装,因此外部样式表可能会影响您的组件...
3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 3.4 事件处理器的返回值 3.5 事件处理器设置的灵活性 3.6 现代事件模型与Event对象 3.7 IE4中的Event对象 3.7.1 对象属性 3.7.2 事件上溯...
VanillaJS-Class-DOM 文档对象模型是网页的接口,在页面加载时由浏览器创建的 HTML 文档表示。 使用 JavaScript,我们可以修改网络的结构、样式和内容。 它基于面向对象编程 ,所以这就是我使用在这个 repo 中构建...