码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript自定义事件监听

时间:2020-02-06 01:20:38      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:回调   rev   false   时间戳   定义   监听事件   dev   targe   触发事件   

一.事件的属性和方法

 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自定义事件监听

标签:回调   rev   false   时间戳   定义   监听事件   dev   targe   触发事件   

原文地址:https://www.cnblogs.com/zhihaospace/p/12267464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!