JS模拟事件操作 · 致力于web前端技术撰写

昨天晚上，朋友问我怎样实现模拟鼠标点击事件，于是有了查找资料，并得到了一些结果。先附上代码。 ~~~ <!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