DOM中的事件模拟
三个步骤： 首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串：
UIEvents（DOM3中的UIEvent）鼠标和键盘事件； MouseEvents（DOM3中的MouseEvent）鼠标事件； MutationEvents（DOM3中的MutationEvent）变动事件； HTMLEvents（没有DOM3中对应的事件）HTML事件； 其次在创建了event对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。 最后就是触发事件。这需要使用dispatchEvent()方法，接收一个参数，即表示要触发的event对象。
模拟鼠标事件
首先创建鼠标事件对象的方法createEvent()传入MouseEvents，返回的对象的方法initMouseEvent()，接收15个信息：
type（字符串）：事件类型如“click”； bubble（布尔值）：是否冒泡； cancelable（布尔值）：是否可取消； view（AbstractView）：与事件关联的视图，一般为document.defaultView； detail（整数）：一般为0，一般只有事件处理程序使用； screenX（整数）：事件相对于屏幕的X坐标； screenY（整数）； clientX（整数）：事件相对于视口的X坐标； clientY（整数）； ctrlKey（布尔值）：是否按下了Ctrl键，默认为false； altKey（布尔值）； shiftKey（布尔值）； metaKey（布尔值）； button（整数）：表示按下了哪个鼠标键，默认为0； relatedTarget（对象）：表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。 最后记得把event对象传给dispatchEvent()方法。 如模拟按钮的单击事件：
HTML复制全屏
1 //模拟click事件 2 //获取btn 3 var btn = document.querySelector("#btn"); 4 //创建event 5 var event = document.createEvent("MouseEvents"); 6 //初始化event 7 event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null); 8 //click事件绑定事件处理程序 9 btn.onclick = function () { 10 console.log("hello"); 11 } 12 //在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力 13 //触发事件 14 btn.dispatchEvent(event); //hello 15 //取消引用 16 btn.onclick = null; 另外，建议使用构造函数"MouseEvent"：
HTML复制全屏
1 var evt = new MouseEvent("click", { 2 bubbles: true, 3 cancelable: true, 4 view: window 5 }); 模拟键盘事件
首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents，返回的对象的方法initKeyEvent()，接收下面参数： type（字符串）：要触发的事件类型，“keydown”等； bubbles（布尔值）：表示事件是否应该冒泡； cancelable（布尔值）：是否可以取消； view（AbstractView）：与事件关联的视图。一般为document.defaultView； key（布尔值）：表示按下的键的键码； location（整数）：表示按下哪里的键。0为主键盘；1为左；2为右；3为数字键盘；4为虚拟键盘；5为手柄； modifiers（字符串）：空格分隔的修改键列表，如“shift”； repeat（整数）：在一行中按下了多少次这个键； 由于DOM3级不提倡使用keypress事件，因此只能利用这种技术来模拟keydown和keyup事件：
HTML复制全屏
1 var textbox = document.querySelector("#myTextBox"); 2 var event = document.createEvent("KeyboardEvent"); 3 event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0); 4 textbox.dispatchEvent(event); 在Firefox中，调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件，返回的事件对象会包含一个initKeyEvent()方法，接收参数：
type； bubbles； cancelable； view； ctrlKey； altKey； shiftKey； metaKey； keyCode； charCode； 另外，建议使用构造函数“KeyboardEvent”
模拟其他事件
浏览器中很少使用变动事件和HTML事件；要模拟变动事件，可以用createEvent("MutationEvent");initMutationEvent();要模拟HTML事件，可以用createEvent("HTMLEvents");initEvent();
自定义DOM事件
用createEvent("CustomEvent");initCustomEvent()方法，接收参数：type；bubbles；cancelable；detail；
HTML复制全屏
1 var btn = document.querySelector("#btn"); 2 var evt = document.createEvent("CustomEvent"); 3 evt.initCustomEvent("click",true,true,"Hello there"); 4 btn.onclick = function () { 5 console.log(event.detail); 6 }; 7 btn.dispatchEvent(evt); IE中的事件模拟
调用document.createEventObject()方法，创建event对象，并指定必要的信息，最后在目标上调用fireEvent()方法，接收两个参数：事件处理程序名称和event对象：
HTML复制全屏
var btn = document.querySelector("#btn"); var evt = document.createEventObject(); evt.screenX = 0; evt.screenY = 0; evt.clientX = 0; evt.clientY = 0; evt.ctrlKey = false; evt.altKey = false; evt.shiftKey = false; evt.button = 0; btn.fireEvent("onclick",evt); 1 var btn = document.querySelector("#btn"); 2 var evt = document.createEventObject(); 3 evt.screenX = 0; 4 evt.screenY = 0; 5 evt.clientX = 0; 6 evt.clientY = 0; 7 evt.ctrlKey = false; 8 evt.altKey = false; 9 evt.shiftKey = false; 10 evt.button = 0; 11 btn.fireEvent("onclick",evt); 结语
感谢您的观看，如有不足之处，欢迎批评指正。
“我自己是一名从事了5年前端的老程序员，辞职目前在做讲师，今年年初我花了一个月整理了一份最适合2019年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴。"
