new Event 创建 JavaScript 自定义事件_js new event-程序员宅基地

技术标签：前端

你肯定处理过很多的事件监听，比如点击事件或者表单提交。事件监听对许多用例来说很有帮助，但是有时我们需要创建自己的自定义事件来处理复杂的交互。在这片短文中，我将告诉你有关创建自定义事件，侦听自定义事件以及创建双击自定义事件所要了解的内容。

一、怎么创建自定义事件

创建自定义事件听起来很困难，但是只需要下面简单的一行代码即可。

const myEvent = new Event("myCustomEvent")

Event构造函数接受两个参数：第一个参数type是字符串，表示自定义事件的名称；第二个参数options是一个对象，表示事件对象的配置，该对象主要有下面两个属性：

bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示能否用 event.preventDefault() 阻止浏览器默认事件。

二、怎么侦听自定义事件

你可以通过事件构造函数创建一个新的 Event 对象。在最基本的形式中，你只需要将一个字符串传递给构造函数，这个字符串就是你定义的事件名称。为了监听这个事件，你可以将该事件监听器添加到你要监听的元素上，如下：

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})

三、触发自定义事件

最后一步，你需要做的事，触发创建并正在监听的事件。

document.dispatchEvent(myEvent)

完整实例：

<button type="button" id="btn">点我</button>

<script>
    var btn = document.getElementById('btn');
    var eve = new Event('msg');

    btn.addEventListener('msg', function(event){
        console.log('hello');
    }, false)

    btn.dispatchEvent(eve); // hello
    
</script>

如何应用：

我们什么时间使用new Event自定义事件？我的一个公共组件里用到了，因为这个公共组件会用到很多页面，或者说这个公共组件里的数据会被很多页面使用，也就是说涉及传值的地方很多，有童鞋会问为什么不用emit事件传值呢，因为你把公共组件传给的文件不一定是父组件，也可能是爷组件。。。这时候就可以使用自定义事件进行传值。

1.在公共组件中创建自定义事件并且触发它；

<template>
    <button type="button" id="btn" @click="btnClick">点我</button>
</template>
<script>
    exprort default {
      methods:{
        btnClick(){
            let eve = new Event('msgClick'); //创建自定义事件（名字叫‘msgClick’）
            let formData = {a:1,b:2,c:3}
            //向eve中添加数据，传送给侦听者
            for (const key in formData){
              eve[key] = formData[key]
            }
            document.dispatchEvent(eve); // 触发自定义事件
        }
      }
    }
    
</script>

2.接收公共组件传过来的值的页面；（可以是任何使用公共组件的页面）

    document.addEventListener('msgClick', function(eve){
        console.log(eve);  //打印出这个事件看看里面有什么
        console.log(eve.a) // 1
    }, false)

补充：new Event()和new CustomEvent()的区别：

new CustomEvent(type, options)

CustomEvent 用法与 Event 一致，区别是 CustomEvent(type, options) 第二个参数 options 对象的detail属性可以绑定数据，即我们自定义传参：

<button type="button" id="btn">点我</button>

<script>
    var btn = document.getElementById('btn');
    var eve = new CustomEvent('msg', {
        detail: {
            info: "hello word"
        }
    });

    btn.addEventListener('msg', function (event) {
        console.log(event.detail.info);
    }, false)

    btn.dispatchEvent(eve); // hello word
</script>

所以，一般使用更加推荐 CustomEvent。

本文链接：https://blog.csdn.net/weixin_51747462/article/details/130577009

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp