DOM的事件模拟(摘)

要确定浏览器是否支持DOM规定的HTML事件,可以使用如下代码:

var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0");

只有根据DOM2级事件实现这些事件的浏览器才返回true,以非标准方式支持这些事件的浏览器会返回false;

关于document.implementation的其它方法以及它们各自的返回值,可以查看MDN上的说明>>

目前主流的浏览器(非IE)支持DOM2级创建的事件类型有:

1、UIEvents     一般化的UI事件

2、MouseEvents  一般化的鼠标事件

3、MutationEvents  一般化的DOM变动事件

4、HTMLEvents  一般化的HTML事件

DOM3增加了文件事件TextEvent/TextEvents(Gecko)、键盘事件KeyboardEvent/KeyEvents(Gecko),更多详情参考MDN document.createEvent

以键盘事件为例,在FireFox中调用createEvent方法并传入KeyEvents创建键盘事件对象,然后调用initKeyEvent方法初始化事件,最后使用dispatchEvent来触发事件,实际开发中需要兼容各浏览器,所以在一般先创建一个通用的事件对象:document.createEvent(“Events”),然后调用initEvent进行事件的初始化

Firefox浏览器(Gecko引擎)中初始化事件的方法initKeyEvent方法接收10个参数:

type 要触发的事件类型(String),如keypress、keydown

bubbles 是否冒泡(Boolean)

cancelable 是否可以取消该事件(Boolean)

view  与事件相关的视图

ctrlKey 是否按下Ctrl键(Boolean),默认为false

shiftKey 是否按下了Shift键(Boolean),默认为false

metaKey 是否按下了Meta键(Boolean),默认为false  关于meta键查了一下“通常用Alt键或Windows键仿真”?

keyCode 按下或释放的键的键码,对应keydown、keyup是有用的,默认值为0

charCode 通过按键生成的字符的ASCII编码,这个参数对keypress有用,默认为0

ex:

var evt = document.createEvent(“KeyEvents”);

event.initKeyEvent(“keypress”, true, true, document.defaultView, false, false, false, false, 65, 65);

dom.dispatchEvent(evt);

其它浏览器(非IE)中,需要采用如下的方式:

ex:

var evt = document.createEvent(“Events”);

evt.initEvent(type, bubbles, cancelable);

evt.view = document.defaultView;

evt.altKey = false;

evt.ctrlKey = false;

evt.shiftKey = false;

evt.metaKey = false;

evt.keyCode = 65;

evt.charCode = 65;

dom.dispatchEvent(evt);

其它的事件类型,如:MutationEvents,可以模拟触发DOMNodeInserted等事件,可惜的是IE中完全不支持这一类的事件(其它浏览器只支持部分或是支持的并不好)。如果以后的浏览器都能较好的支持这一类事件,那么在处理iframe高度自适应方面就很容易解决,可以参考之前写过的文章“不使用定时器实现iframe的自适应高度

检测当前浏览器是否支持这一类的事情,可以使用如下的方法判定:

document.implementation.hasFeature(“MutationEvents”, "2.0”)

前面讲述的是在非IE中的实现方案,IE中实现起来较为简单

var evt = document.createEventObject();

//初始化事件evt.altKey = false;evt.ctrlKey = false;evt.shiftKey = false;evt.keyCode = 65;

dom.fireEvent("onkeypress", evt);

鼠标事件MouseEvents,只需要统一使用document.createEvent(“MouseEvents”);需要使用initMouseEvent方法对事件进行初始化,参数由10个变为15个

type 事件类型(String),如“click”

bubbles 是否冒泡(Boolean)

cancelable 是否支持取消(Boolean)

view 与事件关联的视图

detail 与事件有关的详细信息

screenX 事件相对屏幕的X坐标

screenY 事件相对屏幕的Y坐标

clientX 事件相对视窗的X坐标

clientY 事件相对视窗的Y坐标

ctrlKey 是否按下Ctrl键(Boolean),默认为false

altKey 是否按下了Alt键(Boolean),默认为false

metaKey 是否按下了Meta键(Boolean),默认为false

button 按下的是鼠标的左/右/中键

relatedTarget 与事件相关的对象,只在模拟mouseover、mouseout时使用(对应IE中的fromElement、toElement)

时间: 2024-09-30 05:29:40

DOM的事件模拟(摘)的相关文章

浅谈Javascript事件模拟

事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序.这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件a)Dom

关于DOM的事件操作/DOM介绍/关于DOM操作的相关案例

一.关于DOM的事件操作 1.JavaScript基础分为三个部分: ECMAScript: JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句 DOM: 文档对象模型, 操作网页上的元素的API, 比如让盒子移动, 变色,  轮播图等.. BOM: 浏览器对象模型, 操作浏览器部分功能的API, 比如让浏览器自动滚动 2.事件 JS是以事件驱动为核心的一门语言 3.事件的三要素 (1).事件的三要素: 事件源, 事件, 事件驱动程序 (2).总结: 事件源:

离散事件模拟-银行管理(模拟题,队列)

离散事件模拟-银行管理 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 现在银行已经很普遍,每个人总会去银行办理业务,一个好的银行是要考虑 平均逗留时间的,即: 在一定时间段内所有办理业务的人员逗留的时间的和/ 总的人数.逗留时间定义为 人员离开的时间减去人员来的时间.银行只有考虑了这一点,我们在办理业务的时候,才不会等太多的时间. 为了简化问题,我们认为银行只有一号窗口和二号窗口可以办理业务 ,并且在时间范围是12<=tim

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

第三章:6.栈和队列 -- 离散事件模拟

前言: 本节讲述,队列的入队 和 离队行为,由事件决定情况下,是如何实现的. 目录: 离散事件模拟 正文: 问题:假设某银行有4个窗口对外接待客户,从早晨银行开门起不断有客户进入银行.由于每个窗口在某个时刻只能接待一个客户,因此在客户人数众多时需在每个窗口前顺次排队,对于刚进入银行的客户,如果某个窗口的业务员正空闲,则可上前办理业务,反之,若4个窗口均有客户所占,他便会排在人数最少的队伍后面.现在需要编制一个程序以模拟银行这种业务活动并计算一天中客户在银行逗留的平均时间. 解题关键:掌握每个客户

c#全局鼠标事件以及鼠标事件模拟

最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废,故将其分享于此. 一.全局鼠标事件,首先构建鼠标事件处理器 public delegate void MouseMovedEvent(); public delegate void MouseMDownEvent(); public delegate void MouseMUpEvent(); pu

HTML DOM event 事件 (丫头, 好想你了)

HTML DOM event 事件, 用用就知道了 function isKeyPressed(eventssdasd)     // 这个地方其实无关紧要,就是定义一个名称而已, 不过为了好看, 最好还是写成 event{  if (event.altKey==1)                        // event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等,此处为检测 alt 键是否按下    {  // 此处的 event 必须写正确, 你可以

jacascript DOM变动事件

DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用 DOM2 级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛: 删除节点变动 删除节点时,涉及到 DOMNodeRemoved.DOMNodeRemovedFromDocument 和 DOMSubtreeModified 这三个事件:事件触发的先后顺序是 DOMNodeRemoved 事件.DOMNodeRemovedFromDocument 事件和 DOMSub

2014年辛星解读Javascript之DOM之事件及其绑定

我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字被改变.表单提交.用户点击按键等等,还是蛮多的. 以下我们用实例来演示一下,看以下的HTML代码: <html> <p id = "tag" onclick="this.innerHTML ='小倩' ">辛星</p> </ht