JavaScript自定义事件监听

Posted 2021-03-12 海恋天

一.事件的属性和方法

 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>