DOM createEvent

最新推荐文章于 2025-06-25 10:20:44 发布
最新推荐文章于 2025-06-25 10:20:44 发布
阅读量144 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js基础 js-event 文章标签： createEvent document
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_2245/article/details/82484430
本文介绍如何使用 document.createEvent 方法创建不同类型的 DOM 事件对象，并详细解释了针对 HTMLEvents、MouseEvents 和 UIEvents 的初始化方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

   本文来自w3school：http://www.w3school.com.cn/xmldom/met_document_createevent.asp

    个人学习积累用，感谢！

 

    createEvent()

 

       ---------  创建新的Event对象

 

    语法：

 

/*
 * eventType的值：HTMLEvents、 MouseEvents、 UIEvents
*/
document.createEvent(eventType);

 

   说明对应的eventType不一样，初始化的方法也不一样：

 

  • initEvent -------------------------  HTMLEvents
  • initMouseEvent ----------------- MouseEvents
  • initUIEvent------------------------UIEevents

 

【基础篇】JavaScript的DOM(网页元素操控)事件汇总
风中追风
06-09 784
JavaScript 可以做什么? 事件可以用于处理表单验证，用户输入，用户行为及浏览器动作: 页面加载时触发事件 页面关闭时触发事件 用户点击按钮执行动作 验证用户输入内容的合法性 等等 ... 可以使用多种方法来执行 JavaScript 事件代码： HTML 事件属性可以直接执行 JavaScript 代码 HTML 事件属性可以调用 JavaScript 函数 你可以为 HTML 元素指定自己的事件处理程序 你可以阻止事件的发生。 等等 ...............
10、JavaScript DOM 操作与事件处理全解析
5f4d3s2a1q的博客
07-01 35
本文全面解析了JavaScript中DOM元素的操作方法和事件处理技巧，涵盖了元素的创建、删除及注意事项，详细介绍了DOM事件的各个阶段、绑定与解绑事件处理程序的方法，以及Event对象的属性和用途。同时探讨了事件委托模式、手动触发事件的应用场景和跨浏览器兼容性解决方案，为开发高性能、交互性强的Web应用提供了实用指导。
自定义dom事件createEvent
weixin_38551805的博客
04-13 179
创建自定义事件， 需要调用createEvent("CustomEvent") 。返回的对象包含 initCustomEvent()方法，该方法接收以下4 个参数。  type（字符串）：要触发的事件类型，如"myevent"。  bubbles（布尔值）：表示事件是否冒泡。  cancelable（布尔值）：表示事件是否可以取消。  detail（对象）：任意值。作为event 对象的detail 属性。 自定义事件可以像其他事件一样在DOM中派发，比如： let div = documen
js 中 document.createEvent的用法
10-28
用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event 对象参考。
js原生3种自定义事件方法（createEvent、init\initMouse\UIEvent和Event和CustomEvent）与触发自定义事件（dispatchEvent）
AIWWY的博客
10-27 6161
触发自定义事件 dom.dispatchEvent(eventObject) 触发指定dom节点上绑定的eventObject的type名相同的事件。 参数eventObject表示事件对象，是createEvent()、Event()、CustomEvent()方法返回的创建的Event对象。 创建自定义事件方法 方法一（已被W3C标准弃用，浏览还支持） 通过createEvent函数创建，再通过传入的参数对应的方法初始化。 dom.createEvent() 创建一个指定类型的事件。
html dom createevent,js 中 document.createEvent的用法
weixin_34447182的博客
07-05 659
评论如果用户直接查看文章列表，那么所有的评论以及评论框都是不显示的，但是如果用户通过别的页面比如首页的个人动态直接定位到这篇日志，那么评论就应该全部显示。而列表页和查看单个条目的页面是同一个页面，这就要求我判断一下用户是否定位到该篇日志，如果是，就通过JS来触发 A 标签的点击事件。一开始我尝试了一些方法，想当然地以为 A 标签和按钮一样是有 onclick() 事件的，结果发现没有，后来从网上搜...
document.createEvent()模拟事件
此心安处是吾乡
07-18 2447
document.createEvent() 创建一个指定类型的事件。返回的对象首先被初始化，然后可以传递给element.dispatchEvent。   var event = document.createEvent(type); Example var evt = document.createEvent("Event"); evt.initEvent("cus...
html2canvas 将DOM节点转成图片
weixin_38982591的博客
03-01 556
可以新建一个txt文件，然后丢进去修改后缀名称即可。这是我准备画的DOM节点。将js文件保存到本地。
22、JavaScript 文档对象方法与 DOM 节点操作全解析
b3n4m5q6w7的博客
06-25 24
本文详细解析了JavaScript中的文档对象方法与DOM节点操作，涵盖了元素的创建、属性修改、事件绑定等常用功能，并通过动态创建表格的综合示例展示了如何灵活运用这些技术实现丰富的页面交互效果。同时，文章还介绍了相关浏览器兼容性注意事项和操作流程总结，帮助开发者高效掌握DOM操作的核心技巧。
javascript - 鼠标/键盘等事件的触发
搞毛线的工程师
07-17 4436
今天，突然想起之前有一哥们在封装框架时遇到的一个小问题，所以决定还是分享一下， 这个
HTML DOM 事件
akuibpt23191的博客
07-13 680
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
document.createEvent建立自定义事件
ganyuanmen的博客
12-28 1万+
document.createEvent用于创建事件，在DOM Level 2　的事件中就有HTMLEvents，MouseEvents，UIEvents事件类型。DOM Level 3增加很多事件类型，个人觉得其中最有用的是CustomEvent自定义事件。 为DOM元素创建自定义事件的步骤为： 一、创建事件：var ev = document.createEvent('CustomEve
document.createEventObject
Focus-Fe
03-27 1059
      document.createEventObject   IE私有 创建一个event对象       扩展阅读：       http://www.hbcms.com/main/dhtml/methods/createeventobject.html
JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener
JavaEdge全是干货的技术号
06-17 5327
0 FocusEvent 低级别事件指示Component已获得或失去输入焦点。 由组件生成此低级别事件（如一个TextField）。 该事件被传递给每一个FocusListener或FocusAdapter注册，以接收使用组件的此类事件对象addFocusListener方法。 （ FocusAdapter对象实现FocusListener接口。）每个此类侦听器对象获取此FocusEvent当事件发生时。 有两个焦点事件级别：持久性和暂时性的。 永久焦点改变事件发生时焦点直接移动从一个组件到另一个，例如通
JS自定义事件的定义和触发(createEvent, dispatchEvent)
Leo的Geo
01-16 1万+
【转】http://www.cnblogs.com/stephenykk/p/4861420.html 在JavaScript前端开发中，我们经常调用click、mouseup等基本事件。有的时候，为了满足特定功能的要求，我们需要自定义事件，这就要说到自定义事件的运作机制。 由于浏览器兼容性问题，针对标准浏览器和IE6/7等浏览器。 1. 对于标准浏览器，其提供了可供元素触发的方法：
2016-1-20（document.createEvent事件模拟）
‘’小蜜峰‘’
01-20 2825
序言： 对于这个事件模拟查了而很多资料还是觉得很是模糊，对于一些文档的专业名词很多看不懂，说明自己真的还是不够的，这个真的需要再接再厉了!这万恶的头疼啊，还是来总结一下我查资料的结果吧！ 首先，认识到document.createEvent（）方法是因为前一篇博客的触摸事件的判断是否支持触摸。哪里对于支持触摸用到了document.createEvent（“touchEvent”）;若没有出错的
Javascript事件模拟(鼠标事件、键盘事件)
热门推荐
gold0523的专栏
11-13 1万+
本文介绍了javascript实现事件模拟的方法与实例代码，有关javascript键盘事件、javascript鼠标事件等的用法，感兴趣的朋友参考下 在javascript编程中，事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的。 会有适当的
event.srcElement与event.target
Focus-Fe
09-01 427
其实这个主要还是浏览器自身api的区别：   ie下：          event对象有srcElement属性，但是没有target属性   ff下：        event对象有target属性，但是没有srcElement属性     /* *getTarget---get the target* *@param {Event} event* *...
const { JSDOM } = require('jsdom'); const fs = require('fs'); // 1. 定义环境补全函数 function patchBrowserEnv(window) { // 补全navigator window.navigator = { userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148', // 添加其他必要的属性 language: 'zh-CN', languages: ['zh-CN', 'zh'], platform: 'iPhone', // ... 其他属性 }; // 补全performance window.performance = { now: () => Date.now() - (window.performance.timing.navigationStart || 0), timing: { navigationStart: Date.now() } }; // 防止被检测为自动化环境 window.chrome = undefined; window.__driver_evaluate = undefined; window.__webdriver_evaluate = undefined; // 如果需要固定Math.random，可以取消注释以下代码（但注意，这可能导致签名被识别为异常） // window.Math.random = () => 0.123456789; // 如果需要固定时间，可以取消注释以下代码（同样注意，实际应用中可能不需要固定时间） // const fixedTime = new Date('2023-01-01T00:00:00Z').getTime(); // window.Date = class extends Date { // constructor(...args) { // if (args.length === 0) { // super(fixedTime); // } else { // super(...args); // } // } // now() { // return fixedTime; // } // }; // window.Date.now = () => fixedTime; // 其他需要补全的对象，比如localStorage, sessionStorage等 if (!window.localStorage) { window.localStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {}, clear: () => {}, length: 0 }; } if (!window.sessionStorage) { window.sessionStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {}, clear: () => {}, length: 0 }; } // 补全其他可能需要的对象，如caches（根据引用[1]中的错误，如果H5guard使用了caches，我们需要模拟） if (!window.caches) { window.caches = { open: () => Promise.reject(new Error('Not implemented')), match: () => Promise.reject(new Error('Not implemented')), // 简单模拟，避免报错 }; } } // 2. 获取签名函数 async function getMtgsig() { const dom = new JSDOM(`<!DOCTYPE html>`, { url: 'https://h5.waimai.meituan.com/waimai/mindex/home', runScripts: "dangerously", pretendToBeVisual: true }); const { window } = dom; patchBrowserEnv(window); // ✅ 应用补丁 // 注入H5guard.js const h5guardCode = fs.readFileSync('./H5guard.js', 'utf-8'); const script = window.document.createElement('script'); script.textContent = h5guardCode; window.document.body.appendChild(script); return new Promise((resolve) => { setTimeout(() => { if (window.H5guard?.sign) { const params = { token: "test", shopuuid: "test123" }; resolve(window.H5guard.sign(JSON.stringify(params))); } else { resolve(null); } }, 1500); }); } // 3. 执行并捕获错误 getMtgsig() .then(mtgsig => console.log('MTGSIG:', mtgsig)) .catch(err => console.error('执行错误:', err)); 获取不到H5guard
最新发布
08-11
const event = window.document.createEvent('Event'); event.initEvent('DOMContentLoaded', true, true); window.document.dispatchEvent(event); // 等待H5guard初始化 await new Promise(resolve => setTimeout...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值