事件派发触发以及自定义事件派发dispatchEvent-——————派发键盘事件

news2024/12/23 8:47:22

事件派发触发以及自定义事件派发dispatchEvent

首先DOM的方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数,分别为:事件名称(String)、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean),可选布尔值,指定事件是否在捕获或冒泡阶段执行。true - 事件在捕获阶段执行。false- 默认事件在冒泡阶段执行。

事件的概念:

HTML中与javascript交互可以是通过事件驱动(主流的vue框架讲究一个数据驱动显示)来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。


DOM2事件流"规定的事件流包括三个阶段:
  1. 事件捕获阶段。
  2. 处于目标阶段。
  3. 事件冒泡阶段。

  • 全局绑定一个键盘事件
document.body.addEventListener("keyup",this.keySpace,false);
keySpace(event){
    if(event.code == "Space" || event.key == ' '){
        event.preventDefault();
        *****
    }
}

点击空格键就会有此事件函数的触发!!!!
如何在代码中触发此事件从而达到优化代码的目的???

什么是dispatchEvent?

dispatch意为“调度”、“派遣”,event为“事件”。所以dispatchEvent即向指定事件目标派发一个事件,并以合适的顺序触发受影响的事件目标。

简单来说就是,一般的事件触发都是用户进行某些操作时才会触发,而使用dispatchEvent就可以在代码中手动触发事件了

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<button id="click">Click me!</button>
</body>
	<script type="text/javascript">
		window.onload = function(){
			var btn = document.querySelector('#click');
			btn.addEventListener('click', function(e){
				alert('okk!');
			}, false);//为元素绑定事件监听
			var event = new Event('click');//创建一个click事件
			btn.dispatchEvent(event);//派发事件
		}
	</script>
</html>

使用场景

  • 一是触发自定义事件,浏览器自带事件一般由浏览器接收某些操作之后触发,而自定义事件的触发就需要使用dispatchEvent来进行手动触发了。
  • 二是触发浏览器标准事件。根据需求决定,某些操作如果正好与某个元素事件的触发一致,且该事件很好模拟,我们就可以触发该事件来达到某些我们需要的执行结果。
  • 是我们定义事件的目的就是为了执行某一方法,所以我们手动触发事件的目的其实也是想要执行该事件下影响到的方法。有时候不只是一个方法,且执行顺序也有所区别,这个时候调用方法不如直接触发事件方便,但是方便的同时也会有某些我们不希望触发函数的隐患。

js自动触发空格键示例

要在 JavaScript 中主动触发空格键需要创建键盘事件

let event = new KeyboardEvent('keyup',{key:' '});
 document.body.dispatchEvent(event);

这将创建一个名为 “keyup” 的键盘事件,并将其分派到文档上。在此示例中,我们使用“keyup”事件,这是按下按键时发生的事件。我们还将“key”属性设置为一个空格字符,以模拟按下空格键。

请注意,某些浏览器可能会阻止自动触发键盘事件,因为这可能会被视为潜在的安全漏洞。如果您尝试使用上述代码,但没有看到期望的结果,请查看浏览器控制台是否有任何错误消息。

自定义事件派发

一般的流程是:创建 >> 初始化 >> 派发。
对应的事件流程:document.createEvent() >> event.initEvent() >> element.dispatchEvent()

<div id="div"></div>

<script>
    var elem = document.querySelector('#div');
    var event = document.createEvent('Event');

    // 定义事件名称myEvent
    event.initEvent('myEvent', true, true);
    // 监听myEvent
    elem.addEventListener('myEvent', function (e) {
       console.log(e);
    }, false);
    // 使用目标对象去派发事件,可以是元素节点/事件对象
    elem.dispatchEvent(event);

</script>

其中,

1.createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型

参数事件接口初始化方法
HTMLEventsHTMLEventinitEvent()
MouseEventsMouseEventinitMouseEvent()
UIEventsUIEventinitUIEvent()
MutationEventsMutationEventinitMutationEvent()

2.initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。
支持三个参数:initEvent(eventName, canBubble, preventDefault).
分别表示: 事件名称,是否可以冒泡,是否阻止事件的默认操作
3.dispatchEvent()就是触发执行了,element.dispatchEvent(eventObject),
参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象。

<div id="div"></div>

<script>
var elem = document.querySelector('#div');
var event = new Event('myEvent');
elem.addEventListener('myEvent', function (e) {
    console.log(e)
}, false);
elem.dispatchEvent(event);

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/982698.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Run in PaddleX!四步搞定10+任务场景36个精选产业模型开发与部署!

随着ChatGPT引领的AI破圈&#xff0c;各行各业掀起了AI落地的潮流&#xff0c;从智能客服、智能写作、智能监控&#xff0c;到智能医疗、智能家居、智能金融、智能农业&#xff0c;谁能快速将AI与传统业务相结合&#xff0c;谁就将成为企业数字化和智能化变革的优胜者。然而&am…

10、Kubernetes核心技术 - Label标签

目录 一、概述 二、Label Selector&#xff08;标签选择器&#xff09; 1)、基于等值&#xff08;Equality-based&#xff09; 2)、基于集合&#xff08;Set-based&#xff09; 三、Label相关操作 (1)、yaml文件定义标签 (2)、查看标签 (3)、筛选标签 (4)、添加标签 …

Unity VideoPlayer 指定位置开始播放

如果 source是 videoclip&#xff08;以下两种方式都可以&#xff09;&#xff1a; _videoPlayer.Play();Debug.Log("time: " _videoPlayer.clip.length);_videoPlayer.time 10; [SerializeField] VideoPlayer videoPlayer;public void SetClipWithTime(VideoClip…

iTOP-i.MX6ULL开发板修改 samba 配置文件

sudo vi /etc/samba/smb.conf 添加如下内容&#xff1a; 这些信息都是 samba 的说明和设置&#xff0c;把这些复制上&#xff0c;格式要设置对&#xff0c;使用 Tab 键缩进&#xff0c;然后把注释删 除&#xff0c;不然可能会出错。 [ubuntu_samba] comment arm ubuntu sa…

HashMap、LinkedHashMap和TreeMap:你真的了解它们吗?

亲爱的小伙伴们&#xff0c;大家好呀&#xff01;我是小米&#xff0c;一个热衷于技术分享的90后程序员。今天我要和大家聊聊一个在面试中经常会被问到的话题&#xff1a;HashMap、LinkedHashMap、TreeMap的区别。这可是一个非常重要的知识点&#xff0c;不仅在面试中会被频繁提…

linux运维(二)内存占用分析

一、centos内存高&#xff0c;查看占用内存, top命令详解 1.1: free 命令是 free 单位K free -m 单位M free -h 单位Gfree最常规的查看内存占用情况的命令 1.2: 参数说明 total 总物理内存 used 已经使用的内存 free 没有使用的内存 shared 多进程共享内存 buff/cache 读写…

IP应用场景查询API:深入了解网络用户行为的利器

前言 随着数字时代的不断发展&#xff0c;互联网已经成为人们生活的重要组成部分。而随着越来越多的业务和社交活动迁移到在线平台上&#xff0c;了解和理解网络用户行为变得至关重要。为了满足这个需求&#xff0c;IP 应用场景查询 API 崭露头角&#xff0c;成为深入了解网络…

通讯软件017——分分钟学会Kepware OPC UA Server配置

本文介绍如何配置Kepware OPC UA Server&#xff0c;通过本文可以对OPC UA的基本概念有所了解&#xff0c;掌握OPC UA的本质。更多通信资源请登录网信智汇(wangxinzhihui.com)。 1. 创建OPC UA Server 点击“OPC UA Configuration”&#xff0c;弹出配置界面。 点击“添加”&a…

云计算时代的采集利器

大家好&#xff01;在今天的知识分享中&#xff0c;我们将探讨一个在云计算环境中的爬虫应用利器——独享IP。如果你是一名爬虫程序员&#xff0c;或者对数据采集和网络爬虫有浓厚的兴趣&#xff0c;那么这篇文章将向你展示独享IP在云计算环境下的应用价值。 1. 什么是独享IP&…

学生宿舍护眼台灯怎么样选择?适合宿舍使用的五款台灯

众所周知&#xff0c;咱们的学生是作为近视基数最大的群体&#xff0c;平时压力大导致用眼都很频繁&#xff0c;所以有些学生从小就带上了眼睛&#xff0c;大街上更是随处可见戴着近视眼镜的学生&#xff0c;这对于孩子未来的发展很不利&#xff0c;所以众多家长朋友们也都开始…

这可能是最全面的Python入门手册了!

无论是学习任何一门语言&#xff0c;基础知识一定要扎实&#xff0c;基础功非常的重要&#xff0c;找到一个合适的学习方法和资料会让你少走很多弯路&#xff0c; 你的进步速度也会快很多&#xff0c;无论我们学习的目的是什么&#xff0c;不得不说Python真的是一门值得付出时间…

Java8实战-总结22

Java8实战-总结22 使用流数值流原始类型流特化数值范围数值流应用&#xff1a;勾股数 使用流 数值流 可以使用reduce方法计算流中元素的总和。例如&#xff0c;可以像下面这样计算菜单的热量&#xff1a; int calories menu.stream().map(Dish::getcalories).reduce(0, Int…

LeetCode 刷题记录——从零开始记录自己一些不会的

1. 最多可以摧毁的敌人城堡数目 题意 思路 两层循环&#xff0c;太low了 用一个变量记录前一个位置 代码 class Solution { public:int captureForts(vector<int>& forts) {int ans 0, pre -1;for (int i 0; i < forts.size(); i) {if (forts[i] 1 || forts…

如何解决ArcGIS中数据显示乱码问题?

你是否遇到过在ArcGIS中打开文件的时候&#xff0c;却显示乱码的问题呢&#xff1f; 其根本原因是字符编码造成的&#xff0c;这里就来分享一下如何解决在ArcGIS中导入数据后显示乱码的方法。 数据显示乱码 我们这里以一份“移动基站”数据为例&#xff0c;将它直接拖放到Arc…

webserver 同步 I/O 模拟 Proactor 模式的工作流程

一、服务器编程基本框架 虽然服务器程序种类繁多&#xff0c;但其基本框架都一样&#xff0c;不同之处在于逻辑处理。 二、两种高效的事件处理模式 服务器程序通常需要处理三类事件&#xff1a;I/O 事件、信号及定时事件。 有两种高效的事件处理模式&#xff1a;Reactor 和 Pro…

视频监控汇聚平台EasyNVR安防视频平台如何利用视频监控与AI智能识别技术,实现铁塔基站机房的无人值守方案

安防监控EasyNVR可视化视频汇聚管理系统已在全国多地落地部署&#xff0c;视频集中存储EasyNVR平台可提供多协议&#xff08;RTSP/RTMP/GB28181/海康Ehome/大华/海康SDK等&#xff09;的设备视频接入、采集、处理、分发、AI智能检测等服务。平台可以有效解决通信铁塔各基站机房…

redhat7.6安装weblogic12c

目录 一、环境准备 二、使用root创建用户和组 三、创建部署目录 四、上传安装包 五、创建 oraInst.loc 文件 六、创建wls.rsp 响应文件 七、进行安装 八、使用 wlst.sh 离线模式创建一个域 九、启动服务 十、浏览器访问 一、环境准备 REDHAT版本&#xff1a;Redhat…

TheRouter 框架原理

TheRouter 框架入口方法 通过InnerTheRouterContentProvider 注册在AndroidManifest.xml中&#xff0c;在应用启动时初始化 <application><providerandroid:name"com.therouter.InnerTheRouterContentProvider"android:authorities"${applicationId}.…

基于SSM的医院门诊预约挂号系统的设计与

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着医院管理的日益复…

【2023最新版】DataGrip安装及使用教程

目录 一、Jetbrains学生认证 二、DataGrip下载及安装 1. 使用Jetbrains toolbox a. 安装Jetbrains toolbox b. 安装DataGrip 2. 直接安装 a. 官网下载 b. 安装 三、DataGrip的使用 1. 配置默认设置 2. 安装插件 一、Jetbrains学生认证 JetBrains学生认证是JetBrain…