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

最新推荐文章于 2024-08-30 09:56:28 发布
最新推荐文章于 2024-08-30 09:56:28 发布
阅读量4.4k 收藏 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

参考

event-emitter-target：发布订阅事件机制模块使用Typescript函数样式编程写成添加事件监听器有自动去重功能事件触发时，监听器函数异步执行
02-13
添加事件监听器有自动去重功能 事件触发时，监听器函数异步执行 安装模块 yarn add https://github.com/masx200/event-emitter-target.git 导入模块 import EventEmitterTargetClass from "@masx200/event-emitter-...
e.target与事件委托简例
weixin_30659829的博客
03-18 1139
target定义： 　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法： 　　　　event.target 　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...） 　　　　event.target.id　　　　　　　//获取事件触发元素id 　　　　event.target....
事件对象e的e.target
weixin_49602426的博客
09-11 3033
事件对象是事件的一系列相关数据的集合，跟事件相关。eg: 鼠标点击里面就包含了鼠标的信息（属性和方法）、键盘按下就包含了键盘事件的信息；事件对象是系统给我们自动创建的，不需要我们传递参数；事件对象只有事件（onclick、click等）存在的时候才会存在；事件对象只是一个形参，我们可以自己命名：event、e、ele等；btn.onclick = function(e){ // 这里的e就是所谓的事件对象e.target}e.target返回的是触发事件的对象（元素）。那么它和this。
Ts 监听模式
Edwin_jade的博客
08-30 204
监听模式 和 代理模式 大致差不多
HTML(e.target)BOM对象的常用方法
weixin_51277037的博客
04-28 993
class removeClass 删除class className 获取class classList.add 添加class style e.target.style 例如 e.target.style.color="red" value e.target.value 获取value属性 html e.target.innerHTML 获取子标签
e.currentTarget和e.target
weixin_48962287的博客
03-27 1512
此时，e.target表示的是触发事件的具体元素，而e.currentTarget则表示的是当前正在处理事件的元素，可能是父级元素或者其他祖先元素。例如，可以通过e.target来获取用户点击的具体元素，或者通过e.currentTarget来获取当前正在处理事件的元素。e.target表示的是事件的目标元素，即触发事件的元素，通常是用户在页面中进行操作时所点击的元素。而e.currentTarget表示的是当前事件处理程序所绑定的元素，即事件正在处理的元素。e.target是获取具体的触发元素。
vue3(ts)类型“EventTarget”上不存在属性“value”
Gaojuncheng112的博客
04-17 6452
e.target在ts下的类型断言
javascript中的手势识别器_JavaScript_TypeScript_下载.zip
05-01
4. **事件驱动**：ReDollar使用事件驱动模型，当用户执行特定手势时，会触发相应的事件回调，使得开发者可以轻松地在这些事件中插入业务逻辑。 5. **性能优化**：为了保证在移动设备上的流畅运行，ReDollar通常会...
详解如何在angular2中获取节点
08-28
这里，`$event.target`提供了触发事件的DOM元素，但我们应该尽量避免在组件类中使用`$event`和`$scope`，因为这是AngularJS（Angular 1.x）的语法。在Angular中，我们可以使用事件绑定和局部变量来达到相同的效果。...
Angular4 Select选择改变事件的方法
10-17
console.log(event.target.value); // 在这里可以根据需要做进一步的逻辑处理 } ``` ### 二、使用ngModelChange进行双向数据绑定 虽然直接使用`change`事件可以工作，但在Angular中，更推荐使用`ngModel`指令...
ExchangePictureLocation.zip
09-30
在Egret中，我们可以监听`TouchEvent`事件来处理用户的触摸操作。对于长按操作，我们主要关注`TouchEvent.TOUCH_DOWN`（触摸开始）和`TouchEvent.TOUCH_RELEASE_OUTSIDE`（触摸释放但不在原始触摸点上）这两个事件。...
e.target 原生js 没有 $event的 自定义属性值 传参
lyinshaofeng的博客
11-10 561
vue 原生js e.target 没有 $event的 自定义属性值 传参
js中getElementsByClassName和getElementsByTagName无法获取元素
Jclam的博客
03-07 1952
js中getElementsByClassName和getElementsByTagName无法获取元素
JS事件对象属性e.target、e.currentTarget和this
qq_39706777的博客
11-09 2802
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 如下图，给 ul 绑定点击事件，然后点击其中某个 li，输出当前的 e.target、e.currentTarget e.target 获取的是实际点击的元素 e.currentTarget 获取的是绑定点击事件的元素 事件中的this也是指向当前绑定事件的元素，所以: e.currentTarge === this是一定的， 而e.target===this不一定 ...
e.target 和 this 的区别以及键盘事件的应用
m0_72313625的博客
08-30 1379
e.target 返回的是触发事件的对象（元素）this 返回的是绑定事件的对象（元素） 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
TypeScript常见类型错误 | 类型EventTarget上不存在属性 - ts中的dom类型
好好学习天天向上
09-28 3564
事件,包含了事件的基本信息,如事件类型、目标元素等。可以使用该接口来定义事件的类型。在TypeScript中，使用事件回调函数的参数。更具体的dom元素类型基本都继承。，并对其进行了扩充。，可以将其进行更具体化的约束。xxx不存在xx类型。
TS----Property 'result' does not exist on type 'EventTarget'
黑白门
04-01 4287
let _file: File = event.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(_file); reader.onload = (e)=>{ let obj : any = e.target.result; $('#triggerI...
【TypeScript】Class中dom元素监听事件的this指向问题
Vangogh的博客
02-13 428
Class中dom元素监听事件的this指向问题
angular里($event.target.value)在一个简单的HTML表单中，当我们监听某个输入框的值变化
最新发布
09-19
在Angular中，`($event.target.value)`通常用于处理表单元素（如input、textarea等）的事件，特别是当我们要监听用户在输入框中的输入变化时。当你在HTML表单上绑定一个Angular指令，比如ngModel，然后在对应的控制器或组件方法中添加一个事件处理器（通常是`(input)`或`(change)`），你可以使用 `$event.target.value` 来获取当前输入框的值。 例如： ```html <form (ngSubmit)="onFormSubmit($event)"> <input type="text" [(ngModel)]="name" (input)="handleInputChange($event)"> </form> // 在对应的 TypeScript 文件里 public handleInputChange(event: Event) { const inputValue = (<HTMLInputElement>event.target).value; // 获取输入框的值 console.log('Input value changed:', inputValue); } public onFormSubmit(event: Event) { event.preventDefault(); // 阻止默认提交行为 // 在这里可以进一步处理输入值或其他表单验证 } ``` 在这个例子中，每当用户在输入框中键入内容，`handleInputChange` 方法会被调用，`$event.target.value` 就会得到最新输入的文本。`onFormSubmit` 会在表单提交前执行，这时也可以访问到输入框的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值