JavaScript自定义事件监听

Posted 海恋天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript自定义事件监听相关的知识,希望对你有一定的参考价值。

一.事件的属性和方法

 1 //事件Event
 2 //属性:`
 3 `bubbles`:布尔值,是否会冒泡
 4 `cancelable`:布尔值,是否可以取消默认动作
 5 `target`:目标对象
 6 `currentTarget`:当前对象
 7 `timeStamp`:时间戳(相对于某个时刻)
 8 `type`:事件类型,即注册该事件的名字
 9 `eventPhase`:返回事件传播的当前阶段
10 
11 
12 //方法
13 1.event.stopPropagation(); 阻止冒泡
14 
15 2.event.preventDefault(); 阻止默认动作,只有cancelable为true时才可以阻止默认动作
16 
17 3.event.stopImmediatePropagation(); 阻止事件链

二.自定义事件监听

  • CustomEvent:创建事件
  • dispatchEvent:触发事件

 1 <script>
 2 
 3     // 自定义事件
 4     var event = new CustomEvent(‘myTestEvent‘, {
 5         "detail": {  //可携带额外的数据
 6             age: 18
 7         },
 8         "bubbles": true,//是否冒泡    回调函数中调用,e.stopPropagation();可以阻止冒泡
 9         "cancelable": false,//是否可以取消  为true时,event.preventDefault();才可以阻止默认动作行为
10     });
11 
12     // 绑定监听事件
13     document.addEventListener(‘myTestEvent‘, (e) => {
14         console.log(e);
15     });
16 
17     // 触发事件
18     setInterval(() => {
19         document.dispatchEvent(event);
20     }, 100);
21 
22 </script>

 

以上是关于JavaScript自定义事件监听的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

Android 自定义事件监听器

java 自定义事件的触发及监听

vue中的事件监听机制

Grails 文档中的自定义事件监听器示例

如何在 Vue 自定义指令中添加事件监听器?