DOM 2事件规范允许用户模拟特定事件,IE9、Opera、Firefox、Chrome和Safari均支持,IE还有自己模拟事件的方式。
【操作步骤】
第1步,在页面中设计2个按钮。
<input type="button" value="按钮1" id="btn1" /> <input type="button" value="按钮2" id="btn2" />
第2步,在JavaScript脚本中获取2个按钮,然后为它们注册click事件。
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
EventUtil.addHandler(btn1, "click", function(event){
alert(event.screenX); //鼠标指针的x轴坐标
});
EventUtil.addHandler(btn2, "click", function(event){
//下面几步将在这里操作
});
第3步,创建事件对象。下面代码创建一个鼠标类型的事件对象。
//创建事件对象
var event = document.createEvent("MouseEvents");
【提示】
使用document对象的createEvent()方法可以创建event对象。用法如下:
createEvent(eventType)
参数eventType表示要获取的event 对象的事件模块名,以字符串的形式传递。有效事件模块如下:
- HTMLEvents:接口HTMLEvent,初始化方法iniEvent()
- MouseEvents:接口MouseEvent,初始化方法iniMouseEvent()。
- UIEvents:接口UIEvent,初始化方法iniUIEvent()。
在DOM 2中,所有字符串都使用复数形式,而在DOM 3中使用单数形式。
第4步,初始化事件对象。在创建event对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象。
//初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 100, 0, 0, 0, false, false, false, false, 0, btn2);
【提示】
initMouseEvent()方法用于初始化MouseEvent 对象,在dispatchEvent()方法指派 MouseEvent 之前调用。 initMouseEvent()初始化方法用法如下:
initMouseEvent(String typeArg, boolean canBubbleArg, boolean cancelableArg, org.w3c.dom.views.AbstractView viewArg, int detailArg, int screenXArg, int screenYArg, int clientXArg, int clientYArg, boolean ctrlKeyArg, boolean altKeyArg, boolean shiftKeyArg, boolean metaKeyArg, short buttonArg, EventTarget relatedTargetArg)
参数说明如下:
- typeArg:指定事件类型。
- canBubbleArg:指定该事件是否可以 bubble。
- cancelableArg:指定是否可以阻止事件的默认行为。
- viewArg: 指定event 的 AbstractView。
- detailArg: 指定event 的鼠标单击量。
- screenXArg: 指定event 的屏幕 x 坐标
- screenYArg: 指定event 的屏幕y 坐标
- clientXArg: 指定event 的客户机x 坐标
- clientYArg: 指定event 的客户机y 坐标
- ctrlKeyArg: 指定是否在event 期间按下control 键。
- altKeyArg: 指定是否在event 期间按下alt 键。
- shiftKeyArg: 指定是否在event 期间按下shift 键。
- metaKeyArg: 指定是否在event 期间按下meta 键。
- buttonArg: 指定event 的鼠标按键。
- relatedTargetArg: 指定event 的相关 EventTarget。
第5步,触发事件。使用dispatchEvent()方法定义触发事件。调用dispatchEvent()方法时,需要传入一个参数,即表示要触发事件的event对象。
//触发事件 btn1.dispatchEvent(event);
第6步,在浏览器中预览,当单击按钮2时,将触发按钮1的click事件,同时发现响应的事件类型为click,事件对象反馈的鼠标指针x轴坐标值始终为100。