[TypeScript]监听事件event.target无法正确的获取属性

最新推荐文章于 2024-05-12 15:19:13 发布
最新推荐文章于 2024-05-12 15:19:13 发布
阅读量4.3k 收藏 4
点赞数 1
分类专栏： javascript基础 文章标签： typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhuAiQuan/article/details/124378960
版权

在使用ts开发项目的背景下，一般给dom添加监听事件时函数会拿到当前的事件对象；
在我们指定了参数是Event后，我们去获取e.target里的属性时ts会提醒我们target里没有这个属性；
类似于这样
在这里插入图片描述
明明我们已经指定了事件的类型，为啥获取target里的值的时候会报错呢？？

经过我多方查阅方才得知，ts无法知道当前这个事件是什么元素的事件的类型，不同dom元素的事件里的target值都不相同；
需要指定当前这个事件具体是什么元素里的HTMLElement类型
比如我这个是div 那我指定他是HTMLDivElement即可
在这里插入图片描述
mark

参考

ZhuAiQuan
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
event-emitter-target：发布订阅事件机制模块使用Typescript函数样式编程写成添加事件监听器有自动去重功能事件触发时，监听器函数异步执行
02-13
添加事件监听器有自动去重功能 事件触发时，监听器函数异步执行 安装模块 yarn add https://github.com/masx200/event-emitter-target.git 导入模块 import EventEmitterTargetClass from "@masx200/event-emitter-...
详解如何在angular2中获取节点
08-28
这里，`$event.target`提供了触发事件的DOM元素，但我们应该尽量避免在组件类中使用`$event`和`$scope`，因为这是AngularJS（Angular 1.x）的语法。在Angular中，我们可以使用事件绑定和局部变量来达到相同的效果。...
typescript侦听事件
qq_38267019的博客
06-20 8088
1.Laya.EventDispatcher是表示Laya引擎中API，需要创建一个父类接口，通过父类接口指向子类对象，当调用接口方法时，会自动调用其子类重写方法export interface IEventDispatcher { on(type: string, caller: any, listener: Function, args: Array<any>): Laya....
JavaScript/TypeScript 实现一个高效的事件监听派发类
极客七
02-11 1056
class Third Description Attention! Attention! Attention! Note that this class does not maintain the order in which the message list listens If A listens for the “show” event and B then listens for the “show” event, it will not show A and then show B, each
vue3+ts+vite监听窗口变化+生命周期对比+防抖节流优化
最新发布
Climber_fe的博客
05-12 446
钩子函数中使用window.addEventListener来监听窗口的resize事件，并在事件发生时调用handleResize函数。2.要监听视口宽度，可以使用 Vue3 提供的 watchEffect 函数，结合 window.innerWidth 属性来实现。钩子函数中使用window.removeEventListener来移除事件监听器。2.下图为vue2中生命周期的流程图，vue3大同小异,名称改变哈就是。的函数来处理窗口变化的逻辑。我欲乘风归去,又恐琼楼玉宇。上面我们定义了一个名为。
【JavaScript 教程】事件——EventTarget 接口
web前端开发
06-24 703
作者 | 阮一峰事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。概述DOM 的事件操作（...
【TypeScript】Class中dom元素监听事件的this指向问题
Vangogh的博客
02-13 334
Class中dom元素监听事件的this指向问题
e.target 原生js 没有 $event的 自定义属性值 传参
lyinshaofeng的博客
11-10 529
vue 原生js e.target 没有 $event的 自定义属性值 传参
javascript中的手势识别器_JavaScript_TypeScript_下载.zip
05-01
4. **事件驱动**：ReDollar使用事件驱动模型，当用户执行特定手势时，会触发相应的事件回调，使得开发者可以轻松地在这些事件中插入业务逻辑。 5. **性能优化**：为了保证在移动设备上的流畅运行，ReDollar通常会...
ExchangePictureLocation.zip
09-30
在Egret中，我们可以监听`TouchEvent`事件来处理用户的触摸操作。对于长按操作，我们主要关注`TouchEvent.TOUCH_DOWN`（触摸开始）和`TouchEvent.TOUCH_RELEASE_OUTSIDE`（触摸释放但不在原始触摸点上）这两个事件。...
使用Angular材质构建文件上传组件
04-12
接着，声明一个`fileChange`属性，它是`EventEmitter`类型，用于处理文件选择事件： ```typescript @Output() fileChange = new EventEmitter(); ``` 在`file-uploader.component.html`模板中，我们可以添加一个`...
event.target的target报错
Tml的博客
11-05 418
在vue2中出现错误： Cannot read properties of undefined (reading 'target')
Typescript自定义事件系统
朽朽朽朽朽的博客
10-27 342
自定义事件系统原理与具体实现
JS事件对象属性e.target、e.currentTarget和this
qq_39706777的博客
11-09 2740
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 如下图，给 ul 绑定点击事件，然后点击其中某个 li，输出当前的 e.target、e.currentTarget e.target 获取的是实际点击的元素 e.currentTarget 获取的是绑定点击事件的元素 事件中的this也是指向当前绑定事件的元素，所以: e.currentTarge === this是一定的， 而e.target===this不一定 ...
typescript事件通知机制
热门推荐
WangPengJu
10-16 1万+
PS： 本文参考PureMVC 用到的模式是观察者模式，本来是自己想要一个事件通知机制，刚好看到pureMVC，于是单独把里面的事件通知剥离出来单独用，只有静态的方法，如果你想要考虑复用的话， 可以把静态改掉。代码如下 emitter.ts代码如下 /** * 事件 */ export class Emitter { /** 监听数组 */ private stati
e.target与事件委托简例
weixin_30659829的博客
03-18 1115
target定义： 　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法： 　　　　event.target 　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...） 　　　　event.target.id　　　　　　　//获取事件触发元素id 　　　　event.target....
TS中的事件，事件监听，移除，分发
iDaDi的博客
12-25 7583
TS中的事件，事件监听，移除，分发 TS代码如下(单例)： /** * 事件消息处理 */ class EventCenter { /** 监听数组 */ private listeners = {}; private static _instance = null; public static get instance(): EventCenter {...
事件对象e的e.target
weixin_49602426的博客
09-11 2842
事件对象是事件的一系列相关数据的集合，跟事件相关。eg: 鼠标点击里面就包含了鼠标的信息（属性和方法）、键盘按下就包含了键盘事件的信息；事件对象是系统给我们自动创建的，不需要我们传递参数；事件对象只有事件（onclick、click等）存在的时候才会存在；事件对象只是一个形参，我们可以自己命名：event、e、ele等；btn.onclick = function(e){ // 这里的e就是所谓的事件对象e.target}e.target返回的是触发事件的对象（元素）。那么它和this。
vue3(ts)类型“EventTarget”上不存在属性“value”
Gaojuncheng112的博客
04-17 5869
e.target在ts下的类型断言
typescript 获取图片信息
04-09
这段代码首先获取了input元素，并监听其change事件。当用户选择了图片文件后，会触发change事件的回调函数。在回调函数中，我们首先获取到选择的文件，然后使用FileReader对象读取文件内容。读取完成后，我们创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值