JS模拟事件操作
最后更新于：2022-04-01 11:54:46
昨天晚上，朋友问我怎样实现模拟鼠标点击事件，于是有了查找资料，并得到了一些结果。
先附上代码。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
a{
border: 2px solid red;
text-decoration: none;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
padding: 20px;
}
</style>
</head>
<body>
<a id = "box" href = "javascript:void(0)">点击</a>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById("box");
function onclick(e){
e = e || window.event;
// console.log(e);
alert("a");
}
simulation(oBox, "click", onclick);
function simulation(obj,type,response){
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE = isIE ? isIE[1] : undefined;
//给obj绑定事件
//传统浏览器使用attachEvent 现代浏览器使用addEventListner
isIE < 9 ? obj.attachEvent("on" + type, response):
obj.addEventListener(type, response, false);
// 触发自定义事件
if(isIE<9){
//传统浏览器
var event=document.createEventObject();//创建对象
event.msg="我是fireEvent触发的";//给事件对象添加属性
obj.fireEvent("on" + type, event);//触发事件
}else{
//现代浏览器
var e=document.createEvent("MouseEvents");//创建事件对象
e.initEvent(type,false,false);//初始化事件对象initMouseEvent需要更多参数
e.msg="我是despatchEvent触发的"; //给事件对象添加属性
obj.dispatchEvent(e);//触发事件
}
}
}
</script>
~~~
现在，需要做一些说明，首先我只考虑了火狐和谷歌的兼容性，没有考虑IE6,7,8。今天到公司之后，试图兼容IE6,7,8，首先用IETester测试，遇到很多问题，经朋友推荐，使用2345浏览器去测试，可是不知道为什么，IE7,8都会报不支持attachEvent,不支持createEventObject，不支持fireEvent，实在是无奈至极，查了很多资料，这几个属性，明明就是IE的专属。。。
最最神奇的地方是，我去掉兼容性代码之后重新测测试，竟然IE7,8都是正常的，深深的伤害了我，此处仍然保留考虑兼容性之后的代码，如果哪位读到此篇博客的朋友帮我找到问题所在，自当感激不尽。
最后，再简单叙述下，上面代码中所使用到一些方法。针对IE几个的特殊方法，在此略过，等上面的代码得到确认之后再补充。免得误导他人。
### 绑定事件：
~~~
obj.addEventListener("事件名（不带ON）"，函数名，true/false); //IE9/IE11、FF、Chrome支持
第一个参数事件名：click、hover、blur等等
第二个参数函数名：此事件响应的函数
第三个参数useCapture，值为true或false，如果是true则采用capture，如果是false则采用bubbling方式，即事件冒泡。
~~~
### 创建事件对象（代替鼠标点击）
~~~
通过document上的createEvent()方法，创建事件对象，此方法只接受一个参数，即要创建事件对象的事件字符串
UIEvents：通用的UI 事件，鼠标事件键盘事件都是继承自UI事件，在DOM 3 级上使用的是 UIEvent。
MouseEvents：通用的鼠标事件，在DOM 3 级上使用的是 MouseEvent。
MutationEvents：通用的突变事件，在DOM 3 级上使用的是 MutationEvent。
~~~
### 初始化事件对象
~~~
event.initEvent(eventType,canBubble,cancelable)
eventType：事件的类型，字符串值。如"click"
canBubble:事件是否冒泡，true为冒泡
cancaelable:是否可以用preventDefault()方法取消事件
在创建事件对象之后，触发事件之前。调用 Event.initEvent() 方法。
初始化事件对象，除了可以使用initEvent()方法之外，还可以使用initMouseEvent()和initKeyBoadEvent()，这两个方法接受的参数都比较多，后面可能会做专门详细叙述，因为除了鼠标事件之外，还可以模拟键盘事件。
~~~
### 触发事件
~~~
在创建完事件对象之后，通过dispatchEvent()方法来将事件应用到特定的dom节点上，以便其支持该事件。
~~~
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id = "div_out" style = "border:1px solid green;">外层测试
<div id = "div_inside">内层测试</div></div>
</body>
</html>
<script>
window.onload = function(){
document.getElementById("div_out").addEventListener("click",test1,false);
document.getElementById("div_inside").addEventListener("click",test2,false);
function test1(){ alert("外层div触发"); }
function test2(){ alert("内层div触发"); }
}
</script>
~~~
当值为false时，是冒泡方式，点击内层的div时，会先后触发内层的test2和外层的test1
当值为true时，不冒泡，点击内层的div，只会触发内层的test2