• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
忆百合
博客园    首页    新随笔    联系   管理    订阅  订阅

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显式的触发,同时模拟事件也可以模拟自定义事件的触发,模拟事件包含内置事件和自定义事件;

                 

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

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

posted @ 2021-08-23 14:35  忆百合  阅读(400)  评论(1)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3