javascript - 鼠标/键盘等事件的触发

最新推荐文章于 2024-05-03 16:02:01 发布

CharlesJoker

最新推荐文章于 2024-05-03 16:02:01 发布

阅读量4.3k

点赞数 1

分类专栏：个人随笔文章标签： javascript 各种事件的触发不使用浏览器自带兼容性

本文链接：https://blog.csdn.net/q535999731/article/details/37914199

版权

个人随笔专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天，突然想起之前有一哥们在封装框架时遇到的一个小问题，所以决定还是分享一下，这个问题还是很有意思的，就是如何触发一个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，好吧，今天就写到这里~