window.dispatchEvent(new Event(‘hhh‘)) 判断自定义事件 addEventListener监听事件

最新推荐文章于 2024-03-04 11:57:27 发布
最新推荐文章于 2024-03-04 11:57:27 发布
阅读量6.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gwdgwd123/article/details/107167155
版权
after you
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈Vue.js 组件中的v-on绑定自定义事件理解
12-29
每个 Vue 实例都实现了事件接口(Events interface)，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。 另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 下面是一个文档上面的例子： 2017年4月11日更新 <div id=counter-event-example> <p>{{ total }
eventdispatcher.js:自定义对象的 JavaScript 事件
05-29
eventdispatcher.js 自定义对象的 JavaScript 事件 用法 import { EventDispatcher } from 'EventDispatcher.js' ; // Adding events to custom object class Car extends EventDispatcher { start ( ) { this . dispatchEvent ( { type : 'start' , message : 'vroom vroom!' } ) ; } } // Using events const car = new Car ( ) ; car . addEventListener ( 'start' , function ( event ) { alert ( event . message ) ; } ) ; car .
说明：跨系统或组件发送事件以及接收事件
最新发布
qq_28813031的博客
03-04 114
//dwj:写一个dispatchEvent派发事件 //dwj:进行事件的收集和派发到需要的事件 //键值对进行事件发送到浏览器缓存例如dwj发送99 //dwj:window.localStorage.setItem('dwj','99')
详解JavaScript中的自定义事件编写
01-19
我们可以自定义事件来实现更灵活的开发，事件用好了可以是一件很强大的工具，基于事件的开发有很多优势（后面介绍）。 与自定义事件的函数有 Event、CustomEvent 和 dispatchEvent。 直接自定义事件，使用 Event 构造函数： var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Dispatch the event. elem.dispatchEvent(event); Custo
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
09-05
网页右键ie不支持event.preventDefault和event.returnValue （需要加window） ，需要的朋友可以参考一下
Vue自定义事件(详解)
12-10
前面的话 父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface)，即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名 另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的
自定义事件的触发 dispatchEvent 的用法
热门推荐
weixin_42333548的博客
12-04 3万+
window.addEventListener && window.dispatchEvent 一、标准浏览器提供了可供元素触发的方法：element.dispatchEvent()，在使用之前，需要创建和初始化，下面是具体的用法： vue中举例： 1.通过 var event = document.createEvent("HTMLEvents"); 这个方法创建一个eve...
window自定义事件
weixin_47084033的博客
03-02 2124
//定义 window.dispatchEvent(new CustomEvent("事件名", {参数key:参数value})) //监听 window.addEventListener("事件名", 参数key => {})
自定义事件的建立和触发
qq_40959617的博客
09-15 472
// handle 要执行的函数 const handle=(val)=>console.log(val?.detail?.name); // 自定义一个事件名称是：customEventName 。其他地方触发了此事件，就会执行handle操作 window.addEventListener('customEventName',handle,false) // 触发customEventName事件，并且传递了一个事件对象 ，detail 有反馈的信息内容。此时hanlde打印值为1 wi...
自定义事件的触发dispatchEvent
gwdgwd123的博客
07-06 1801
自定义事件的触发dispatchEvent R_X关注 12018.08.28 11:46:32字数 746阅读 36,768 一、element.dispatchEvent() 对于标准浏览器，其提供了可供元素触发自定义事件的方法：element.dispatchEvent().。 不过，在使用该方法之前，我们还需要做其他两件事，即创建和初始化。 document.createEvent() event.initEvent() element.dispatchEvent() 举个例子：
来自window全局的一个使用大坑
Xerath的博客
10-26 704
想都没想过会出现这样的问题： 首先我们简单看一下这个函数： //创建一个全局监听事件 export const sendEvent = (key, vals) =&gt; { var event = new Event(key); event.vals = vals; window.dispatchEvent(event); } 定义在window上面的全局监听函数...
dispatchEvent兼容IE
qq_36262295的博客
03-30 327
【代码】dispatchEvent兼容IE。
addEventListener和dispatchEvent的用法
都是狠人的博客
04-07 965
addEventListener和dispatchEvent 举个例子 //这里我们给全局添加了个名为CubeAppAutoSpeech.push的自定义事件 window.addEventListener('CubeAppAutoSpeech.push', (event) => { console.log(event); if(event.detail){ } }) 然后我们接下来去触发这个事件 window.dispatchEvent(
使用dispatchEvent派发自定义事件
个人前端记录
06-25 8691
这里暂不介绍对低版本IE的兼容。。。 标准浏览器中使用dispatchEvent派发自定义事件：element.dispatchEvent()，除此之外，还有创建和初始化事件： 一般的流程是：创建 &amp;gt;&amp;gt; 初始化 &amp;gt;&amp;gt; 派发。 对应的事件流程：document.createEvent() &amp;gt;&amp;gt; event.initEvent() &amp;gt;&amp;g
浏览器自定义事件监听以及应用
brokenkay的博客
04-08 1984
自定义事件 如果我们想在window上面挂载一个自定义事件该如何实现呢?比如: window.addEventListener("testEvent",(e)=>{ console.log(e.data); }) 想实现上面的事件监听可以利用window.dispatchEvent这个API派发自定义事件.整个过程是先创建自定义事件,再通...
js使用自定义监听事件
Davidzw99的博客
12-05 1639
js 自定义监听事件
JS DOM编程笔记 - dispatchEvent() 代码触发事件（二一）
小帅的编程笔记
11-06 1798
在JavaScript中绑定的点击、键盘等事件，如果要触发它，需要用户手动去触发它。 今天我们将通过代码的方式来触发这些事件。 我们将会用到Event 构造函数和 element.dispatchEvent()方法。 使用代码来生成事件的步骤如下： 首先用Event 构造函数创建一个新的 Event 对象。 然后，使用 dispatchEvent() 方法触发事件。 Event 构造函数 使用Event 构造函数来创建一个新事件： let event = new Event(type, [,option
事件流与window.addEventListener介绍说明
yabianhua的专栏
11-01 7521
1.首先我们来了解几个概念，“事件”，“事件流”，“事件名称”，“事件处理函数/事件监听函数，也许是“老生常谈”，知道的朋友可以越过。 事件： 事件是用户自身或浏览器进行的特定行为。如：用户点击 也就是常用的click事件 事件流：多个事件  按一定顺序触发  形成了事件流 事件名称：如上面所讲的click就是事件名 事件处理函数/事件监听函数（Dom的叫法）就是事件触发后的处理函数，如ob
window.dispatchEvent 怎么传参数
09-08
### 回答1： window.dispatchEvent()方法只能触发指定事件的默认行为，无法传递自定义参数。如果需要传递参数，可以使用自定义事件和事件对象，如下所示： ```javascript // 创建自定义事件 const myEvent = new CustomEvent('myEvent', { detail: { data: 'Hello World!' } }); // 触发自定义事件，并传递参数 window.dispatchEvent(myEvent); // 监听自定义事件 window.addEventListener('myEvent', (event) => { console.log(event.detail.data); // 输出：Hello World! }); ``` 在创建CustomEvent时，可以通过detail属性传递自定义数据。在监听事件时，可以通过event对象的detail属性获取传递的数据。 ### 回答2： 在使用window.dispatchEvent方法时，我们可以通过创建一个CustomEvent对象并将其作为参数传递给该方法来传递参数。 具体步骤如下： 1. 首先，创建一个CustomEvent对象，构造函数接受两个参数，即事件类型和其他属性。 ```javascript var event = new CustomEvent('eventName', { detail: { param1: 'value1', param2: 'value2' } }); ``` 这里的'eventName'可以是自定义的事件类型，在派发事件时需要与之匹配。 另外，我们可以利用detail字段来传递参数，其中param1和param2是自定义的参数名，value1和value2是对应的参数值。 2. 然后，通过window.dispatchEvent方法来派发自定义事件： ```javascript window.dispatchEvent(event); ``` 这里将上面创建的CustomEvent对象作为参数传递给dispatchEvent方法。 3. 最后，可以在相应的监听器中获取传递的参数。 ```javascript window.addEventListener('eventName', function(event) { var param1 = event.detail.param1; var param2 = event.detail.param2; console.log(param1, param2); }); ``` 在相应的事件监听器中，我们可以通过event.detail来访问传递的参数，从而得到param1和param2的值。 通过以上步骤，我们可以使用window.dispatchEvent方法来传递参数并触发自定义事件。 ### 回答3： window.dispatchEvent方法用于手动触发一个指定事件的事件处理程序。它可以传递一个带有事件信息的自定义事件对象作为参数。以下是使用window.dispatchEvent方法传递参数的示例： 首先，我们需要创建一个自定义事件对象，可以使用Event构造函数来实现。 ```javascript // 创建自定义事件对象 var customEvent = new Event('myEvent', { bubbles: true, cancelable: true }); ``` 然后，我们可以为这个自定义事件对象添加任意的属性和值，作为要传递的参数。 ```javascript // 添加参数 customEvent.param1 = 'value1'; customEvent.param2 = 'value2'; ``` 最后，我们可以通过调用window.dispatchEvent方法并将自定义事件对象作为参数来触发指定事件的事件处理程序。 ```javascript // 触发事件 window.dispatchEvent(customEvent); ``` 当事件处理程序被调用时，我们可以通过访问事件对象的属性来获取传递的参数。 ```javascript // 监听事件处理程序 window.addEventListener('myEvent', function(event) { console.log(event.param1); // 输出'value1' console.log(event.param2); // 输出'value2' }); ``` 通过以上步骤，我们可以使用window.dispatchEvent方法传递自定义的参数来触发指定事件的事件处理程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值