javascript事件模拟

        通常事件是通过用户的操作行为（点击、滚动等）或者浏览器的行为（加载onload、卸载等）来触发完成的；但是事件也可以通过js来触发完成（通过js达到行为触发事件的效果），这就是事件模拟；         

        事件模拟的步奏：

                1.给DOM元素绑定事件（普通的事件绑定）；

                2.创建模拟事件对象；

                       let eve=document.createEvent("MouseEvents");

                       参数说明：UIEvents，一般化的ui事件，鼠标事件和键盘事件都继承于该事件；MouseEvents，一般化的鼠标事件；MutationEvents，DOM变动事件；HTMLEvents，html事件，没有对应的DOM3级。DOM2是复数形式，DOM3是单数形式，经测试两种形式都可以起作用；

                       DOM2级中对键盘事件没有做出规范的规定。在DOM3级中对键盘事件有明确的定义。调用createEvent方法，传入KeyboardEvent能够创建键盘事件。返回的事件对象包含一个initKeyEvent的方法。这个方法的参数如下：type，事件类型，如keydown；bubbles，事件是否支持冒泡，如true；cancelable，事件是否可以取消，如true；view，事件的视图，一般为document.defaultView；key，表示按下键的键码；location，表示按下了哪里的键，0表示默认的主键盘，1表示左，2表示右，3表示数字键盘，4表示移动设备，5表示手柄；modifiers，空格分隔的修改键列表，如shift；repeat，按这个键的次数。

                       CustomEvent事件对象，也就是自定义事件对象，通过initCustomEvent初始化对象；

                3.初始化模拟事件对象；

                       eve.initMouseEvent("click",false,false);

                       参数说明：这个方法接收15个参数，分别与鼠标事件中典型的属性一一对应，属性如下：type，表示要触发的事件类型，如“click”；bubbles，是否支持冒泡，如true；cancelable，表示事件是否可以取消，如true；view，事件关联的视图，一般是document.defaultView；detail，与事件有关的详细信息，通常设置为0；screenX，事件相对于屏幕的x坐标；screenY，事件相对于屏幕的y坐标；clientX，事件相对于视口的X坐标；clientY，事件相对于视口的Y坐标；ctrlKey，表示是否按下了ctrl键，一般为false；shiftKey，表示是否按下了shit键，一般为false；metaKey，表示是否按下了meta键，一般为false；button，表示按下的是哪一个鼠标键，默认为0；relatedTarget，表示与事件相关的对象，在模拟mouseout和mouseover时使用。

　　               对于需要模拟鼠标事件，一般只需要传递前3个参数。

                4.触发模拟事件对象；

           btn.dispatchEvent(evt);

          事件模拟存在兼容性问题，小于等于ie8版本把2、3、4步奏合并成了两个步奏，但是总体的思路是类似的，就是先创建事件模拟对象，然后再触发事件模拟对象；

        var evt=document.createEventObject();
        btn.fireEvent("onclick",evt);

 

 

          以上内容整理自浅谈JavaScript的事件（事件模拟） - 水击三千 - 博客园 (cnblogs.com)

 

 

          自定义事件是对内置事件类型的补充，不包含内置事件；而模拟事件是将原本由行为触发的内置事件，改为通过js显式的触发，同时模拟事件也可以模拟自定义事件的触发，模拟事件包含内置事件和自定义事件；

                 

------------恢复内容开始------------

ie和非ie给元素添加事件监听：

------------恢复内容开始------------

        通常事件是通过用户的操作行为（点击、滚动等）或者浏览器的行为（加载onload、卸载等）来触发完成的；但是事件也可以通过js来触发完成（通过js达到行为触发事件的效果），这就是事件模拟；         

        事件模拟的步奏：

                1.给DOM元素绑定事件（普通的事件绑定）；

                2.创建模拟事件对象；

                       let eve=document.createEvent("MouseEvents");

                       参数说明：UIEvents，一般化的ui事件，鼠标事件和键盘事件都继承于该事件；MouseEvents，一般化的鼠标事件；MutationEvents，DOM变动事件；HTMLEvents，html事件，没有对应的DOM3级。DOM2是复数形式，DOM3是单数形式，经测试两种形式都可以起作用；

                       DOM2级中对键盘事件没有做出规范的规定。在DOM3级中对键盘事件有明确的定义。调用createEvent方法，传入KeyboardEvent能够创建键盘事件。返回的事件对象包含一个initKeyEvent的方法。这个方法的参数如下：type，事件类型，如keydown；bubbles，事件是否支持冒泡，如true；cancelable，事件是否可以取消，如true；view，事件的视图，一般为document.defaultView；key，表示按下键的键码；location，表示按下了哪里的键，0表示默认的主键盘，1表示左，2表示右，3表示数字键盘，4表示移动设备，5表示手柄；modifiers，空格分隔的修改键列表，如shift；repeat，按这个键的次数。

                       CustomEvent事件对象，也就是自定义事件对象，通过initCustomEvent初始化对象；

                3.初始化模拟事件对象；

                       eve.initMouseEvent("click",false,false);

                       参数说明：这个方法接收15个参数，分别与鼠标事件中典型的属性一一对应，属性如下：type，表示要触发的事件类型，如“click”；bubbles，是否支持冒泡，如true；cancelable，表示事件是否可以取消，如true；view，事件关联的视图，一般是document.defaultView；detail，与事件有关的详细信息，通常设置为0；screenX，事件相对于屏幕的x坐标；screenY，事件相对于屏幕的y坐标；clientX，事件相对于视口的X坐标；clientY，事件相对于视口的Y坐标；ctrlKey，表示是否按下了ctrl键，一般为false；shiftKey，表示是否按下了shit键，一般为false；metaKey，表示是否按下了meta键，一般为false；button，表示按下的是哪一个鼠标键，默认为0；relatedTarget，表示与事件相关的对象，在模拟mouseout和mouseover时使用。

　　               对于需要模拟鼠标事件，一般只需要传递前3个参数。

                4.触发模拟事件对象；

           btn.dispatchEvent(evt);

          事件模拟存在兼容性问题，小于等于ie8版本把2、3、4步奏合并成了两个步奏，但是总体的思路是类似的，就是先创建事件模拟对象，然后再触发事件模拟对象；

        var evt=document.createEventObject();
        btn.fireEvent("onclick",evt);

 

 

          以上内容整理自浅谈JavaScript的事件（事件模拟） - 水击三千 - 博客园 (cnblogs.com)

 

 

          自定义事件是对内置事件类型的补充，不包含内置事件；而模拟事件是将原本由行为触发的内置事件，改为通过js显式的触发，同时模拟事件也可以模拟自定义事件的触发，模拟事件包含内置事件和自定义事件；

                 

------------恢复内容结束------------

------------恢复内容结束------------