今天,突然想起之前有一哥们在封装框架时遇到的一个小问题,所以决定还是分享一下,这个问题还是很有意思的,就是如何触发一个button的mouseover事件,
首先呢,我们先来回顾一下有关对象时间的触发,浏览器默认封装的事件对于一个不可输入对象,例如div对象,它具有blur和click,也就是相当于如下:
var elementDiv = document.createElement("div");
elementDiv.blur();//相当于触发div对象的onblur事件
elementDiv.click();//相当于触发div对象的onclick事件
如果是可输入对象的话,例如:<input type="text">,还会有一个
focus的获取焦点事件。
这些事浏览器封装好的,提供的,但是,如果是一个浏览器未封装的呢,例如mouseover...
最开始考虑这个问题的时候,我是想用钩子(Hook)做,用一个模拟钩子去伪装一个鼠标,去触发事件,但是这样的话,需要移动你的光标位置,
然后出发事件,先不说可行性,这样的操作量对于一个框架来说是不可取的,于是问题进入卡死阶段,后来,有人给出一个比较生僻的方法,
但是这个方法确实最适合的解决方案:
DOM里,如果我们创建对象的话,需要使用的方法就是documen.createElement(DOM标签),那么,我们创建对象是不是也会有类似的方法呢,
答案是肯定的,DOM提供一个方法document.createEvent(DOM事件类型),那么下面我们来分析一下这个方法。
DOM事件类型:
这个实在是不爱写了,我就直接上图了
创建事件
这个可以看出,我们可以创建3类事件,HTMLEvents/MouseEvents/UIEvents
HTMLEvents:包括 ‘abort’, ‘blur’, ‘change’, ‘error’, ‘focus’, ‘load’, ‘reset’, ‘resize’, ‘scroll’, ‘select’,‘submit’, ‘unload’. 事件
UIEevents :包括 ‘DOMActivate’, ‘DOMFocusIn’, ‘DOMFocusOut’, ‘keydown’, ‘keypress’, ‘keyup’.间接包含 MouseEvents.
MouseEvents:包括 ‘click’, ‘mousedown’, ‘mousemove’, ‘mouseout’, ‘mouseover’, ‘mouseup’.
于是创建这三类事件的语句就是如下:
<script>
var HTMLEvent = document.createEvent("HTMLEvents");
var UIEvent = document.createEvent("UIEvents");
var MouseEvent = document.createEvent("MouseEvents");
</script>
事件初始化:
然后,既然事件创建完了,就该初始化了,初始化参数我也是直接贴图了
由此可以看出,初始化需要的参数,举个例子来说就是
<script>
var MouseEvent = document.createEvent("MouseEvents");
MouseEvent.initMouseEvent("mouseover",false,true);
</script>
第一个参数就不解释了,就是上述提供的事件类型,
第二个参数事件起泡,说到这个就要分析DOM事件的执行阶段:
1:捕获阶段,说白了就是去找事件对应的DOM节点
2:可以说是事件发生阶段,就是DOM执行对应的事件
3:起泡阶段:这个就是在执行完当前节点的事件后向上起泡,如果上层节点有相同的事件,则执行;具体的来说就是一个div中有个a,并且div和a对象都具有onclick事件,并且a的click事件是起泡的,那么,当a事件的click事件触发并且执行完之后,会执行div的click事件。
第三个参数也不解释了,就是是否接受取消事件的默认关联。
事件触发响应
这个就是直接调用dispatchEvent() 事件了,我直接贴图了
这个写法格式就是
要触发的对象.dispatchEvent(要触发的事件)。
下面我上一段代码展示所有的功能:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1265.19">
</head>
<body>
<div onclick = "testClick()" id="divA">
</div>
</body>
<script type="text/javascript">
function testClick(){
alert("click");
}
var clickEvent = document.createEvent("MouseEvents");
var clickElement = document.getElementById("divA");
clickEvent.initMouseEvent("click",false,true);
clickElement.dispatchEvent(clickEvent);
</script>
</html>
这个就是触发div的click事件;
并且这种写法的兼容性是杠杠的~
PS:以上截图都是出自W3CSchool,好吧,今天就写到这里~