用createEventObject来模拟事件参数

简介:
原来在程序中模拟事件触发的时候,我写过一篇文章叫" 在什么时候才会用到fireEvent方法呢?"。文章中说了我们怎么样来使用模拟事件的详细方法和步骤,不过当时忽略了fireEvent的一个Optional的参数 oEventObject,它是做什么的呢?

    由于一次对事件的更精确的触发控制,才知道了为什么会需要createEventObject这个方法。原来觉得可以fireEvent,对于控制事件触发已经非常的方便和强大了,可是一次BT的控制,发现居然还必须自己控制事件参数event的值。我们知道当事件触发时,正常的window.event对象的众多属性基本都是readonly的。而使用fireEvent触发事件后,event对象的很多属性都是默认值(或空值),那么我们怎么修改它成为我们期望的值呢?这时createEventObject方法就派上用场了。

    调用document对象的createEventObject方法,我们会得到一个event的对象实例。这个是当然了,不过这个我们创建的event实例的属性大都是可写的,这样一来我们就完全可以定制一个具有我们希望属性参数的event对象。在使用它来作为fireEvent方法的参数,事件触发后的控制就完完全全的在我们自己的掌握之中了 。看下面这个我整理并简化后,使用createEventObject方法配合fireEvent的事例:
< div  id ="divEvent"  oncontextmenu ="return false;"  style ="border: dotted 1px blue;
    width: 170px; height: 100px; padding: 10px"
 onmousedown ="ShowContextMenu(this)" >
</ div >
Right click the above rectangle.
< script > </ script >
< script  Language ="javascript" > </ script >
< br  />
< br  />
< button  onclick ="RunEvent()" >
    Run Event </ button >
< button  onclick ="FireEvent()" >
    Fire Event </ button >
< br  />
< br  />
< button  onclick ="document.location.href=document.location.href" >
    Refresh </ button >

    当我们在蓝色的区域内点击鼠标右键时,通过调用ShowContextMenu方法,会出现一个context menu。并且ShowContextMenu的逻辑依赖于event对象的属性值,当我么使用"Run Event"这个按钮时,由于event对象里是默认值,ShowContextMenu方法不能正确的执行。使用FireEvent方法,我们通过createEventObject调用,创建一个event对象,并赋与适当的属性值,我们就可以完全使用代码模拟出鼠标或键盘所触发的事件动作。

    当然,fireEvent和createEventObject方法都是IE实现的DOM提供的独家方法


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
ruoyi-nbcio项目增加右上角的消息提醒
ruoyi-nbcio项目增加右上角的消息提醒
285 0
postcss-px-to-viewport-8-plugin 适配
postcss-px-to-viewport-8-plugin 适配
1622 0
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
1138 0
|
存储 Java API
写给大忙人看的 - Java中从MinIO服务器中下载文件(3)
前面两章介绍了 MinIO 文件服务器的环境搭建,以及在 Java 中上传文件至 MinIO 文件服务器中,现在,一起来看下如何从 MinIO 文件服务器中下载文件吧
2401 0
|
11月前
|
Rust 前端开发 API
Tauri 开发实践 — Tauri HTTP 请求开发
本文介绍了如何在 Tauri 中发起 HTTP 请求。首先通过安装 Tauri 生态中的工具包并配置 `tauri.conf.json` 文件来允许特定域名的 HTTP 通信。接着封装了一个简单的 HTTP 客户端类,并在页面中使用该客户端实现 GET 和 POST 请求。最后提供了完整的源码地址以供参考。此功能使得桌面应用能够与远程服务器进行交互,增强了应用的实用性。
702 1
Tauri 开发实践 — Tauri HTTP 请求开发
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue 中,表格组件是使用频率及复杂度排名第一的组件,前端经常需要根据后台返回的数据动态渲染表格,比如动态表格如何生成,因为表格的列并不是固定的,在未知表格具体有哪些列的场景下,前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理,比如第一列是日期,需要把相同的日期进行合并,这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即
3425 0
|
前端开发 JavaScript UED
【专栏:交互与用户体验篇】CSS 滚动效果与视差滚动
【4月更文挑战第30天】本文探讨了CSS滚动效果和视差滚动在提升网页用户体验中的作用。CSS滚动效果通过控制元素动态呈现,实现平滑滚动、元素跟随和滚动触发动画等,增强视觉吸引力。视差滚动则通过不同层次元素的差异速度移动,营造深度感。这两种技术可用于长页面设计、故事讲述和创意展示,提高用户沉浸感和互动性。实现方法包括纯CSS和结合JavaScript,但需注意性能优化、适度使用及兼容性测试,以打造优质用户体验。案例分析进一步展示了它们的实际应用价值。
236 3
|
敏捷开发 测试技术 持续交付
阿里云云效产品使用合集之如何确保解决冲突代码是提交到合并的目标分支
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
11月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
152 4
|
Java 编译器 程序员
Java异常处理和最佳实践(含案例分析)
如何处理Java异常?作者查看了一些异常处理的规范,对 Java 异常处理机制有更深入的了解,并将自己的学习内容记录下来,希望对有同样困惑的同学提供一些帮助。
13414 3
Java异常处理和最佳实践(含案例分析)