尝试在TypeScript中添加侦听事件
在TypeScript中添加侦听事件可以通过以下步骤完成：
- 首先，确保你已经安装了TypeScript的开发环境。你可以使用npm或者yarn来安装TypeScript。
- 创建一个TypeScript文件，例如
app.ts，并在文件中定义一个类或者对象，用于添加侦听事件。
class EventListener {
// 添加一个事件处理函数
addEventListener(eventName: string, callback: () => void) {
// 在这里添加事件监听逻辑
// 例如，可以使用DOM API来添加事件监听
document.addEventListener(eventName, callback);
}
}- 在你的应用程序中实例化这个类或者对象，并调用
addEventListener方法来添加事件监听。
const listener = new EventListener();
listener.addEventListener('click', () => {
console.log('点击事件被触发');
});在上面的例子中，我们使用addEventListener方法来添加一个点击事件的监听器，并在事件触发时打印一条消息到控制台。
- 编译TypeScript文件为JavaScript。在命令行中，使用
tsc命令来编译TypeScript文件。
tsc app.ts这将会生成一个名为app.js的JavaScript文件，其中包含了编译后的代码。
- 在你的应用程序中引入生成的JavaScript文件，并运行应用程序。
<!DOCTYPE html>
<html>
<head>
<title>事件监听示例</title>
<script src="app.js"></script>
</head>
<body>
<!-- 在这里添加触发事件的元素 -->
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
// 在这里调用TypeScript中定义的事件处理函数
listener.addEventListener('click', () => {
console.log('点击事件被触发');
});
});
</script>
</body>
</html>在上面的例子中，我们在HTML文件中引入了生成的JavaScript文件，并在按钮元素上添加了一个点击事件的监听器。当按钮被点击时，会触发TypeScript中定义的事件处理函数，并在控制台打印一条消息。
相关·内容
1回答
我正在尝试将监听器事件添加到我的httpsServer中，但在传递正确的参数/类型时遇到问题 this.httpsServer.listen(process.env.PORT || 3000); : "port " + addrress.port;}; 除了侦听事件之
浏览 31提问于2019-04-06得票数 1
回答已采纳
我对typeScript非常陌生，我正在尝试使用TypeScript创建一个简单的JavaScript库。我有一个用于窗口load的事件侦听器，当加载窗口时，我填充了一些配置(这些配置是变量)，在加载回调之后，我需要运行其他函数，这些函数还需要填充。我使用了一个用于promise的库，但是它很重，而且在GitHub上也不出名，当我在typeScript中添加绑定的javascript文件时，它超过了
浏览 3提问于2017-02-09得票数 1
回答已采纳
我正在使用TypeScript模板设置一个新的无服务器aws-nodejs-typescript monorepo。模板生成一个用于配置的serverless.ts文件。支持为现有的SNS主题添加AWS SNS事件侦听器：
TS2322: Type ‘{ arn: string; }’ is not assignableexpected type comes from property ‘sns’ wh
浏览 4提问于2020-11-03得票数 1
回答已采纳
TypeScript具有映射DOM事件的不同接口。(例如KeyboardEvent、MouseEvent等)。我们可以找到他们。例如，当在事件侦听器中接收事件的有效负载时，它们在Angular中很方便。有谁能证实并解释原因吗？我希望TypeScript团队能够为每个DOM事件共享接口。
浏览 26提问于2020-05-26得票数 11
我使用knockout，它是foreach绑定，用于将表行绑定到表中。我不会更新UI来添加或删除行，这都是由knockout完成的。我还使用了tipped的js库向这些行添加工具提示。问题是我没有引用typescript或typescript d.ts定义中的行。我用这段丑陋的代码让它工作。create tooltips and listeners
$(".tipped").removeClass("tipped"); /
浏览 0提问于2014-08-22得票数 1
我正在尝试使用按钮和切换类将事件侦听器添加到节点列表中，但遇到错误:属性'classList‘在类型’EventTarget‘上不存在。
浏览 44提问于2021-10-30得票数 2
回答已采纳
当我使用“下一步”或“上一步”按钮点击幻灯片时，幻灯片的自动滚动再次启动，这样每次单击轮播时，轮播就会跳过两个图像，所以鼠标在轮播上的事实被忽略了。演示版本的旋转木马似乎有类似的问题()，但我不确定是否可以在单击幻灯片时重新设置noPause值？不确定是否有人知道这是否可能？
浏览 2提问于2018-04-17得票数 0
当用户在客户机中添加一个新条目时，我需要从服务器发出一个web服务调用(客户端代码没有访问权限)，并向存储在MongoDB中的数据添加一些附加信息。是否需要侦听服务器和客户端上的“添加”按钮上的单击事件？是否应该在服务器响应的客户端上引发自定义事件？是否有正确的方法直接调用服务器端方法？最重要的是，我如何在这一切中保持TypeScript的快乐呢？
我是新的TypeScript层之
浏览 2提问于2015-12-29得票数 1
回答已采纳
1回答
我想将事件侦听器添加到按钮中。应该在click上调用的函数作为参数传递。"click", argFunction); console.log("test");试图以这种方式添加事件侦听器会导致TypeScript说“来自类型”的参数“函数”不能分配给带有type的参数“(这里: HTMLElement，ev: Mo
浏览 0提问于2021-05-18得票数 0
回答已采纳
我正在尝试将我的项目从javascript迁移到typescript，但在迁移处理事件的类时遇到了问题。为了避免添加/删除事件侦听器的重复描述选项，我们使用如下的包装器： this.windowResizeHandler = new MyEventHandler(this.windowResizeHandler.add(); this.windowResizeHandler.remo
浏览 5提问于2018-12-09得票数 1
:{ }即使我在if语句中检查props.onBoundsChanged，我也得到了TS2722:无法调用可能是“未定义”的对象。在使用props.onBoundsChanged的位置出现错误。我该如何解决这个问题？
浏览 4提问于2020-02-20得票数 5
回答已采纳
在jQuery中添加单击侦听器是不起作用的。似乎在HTML语言中创建的嵌套属性不是由jQuery挑选来添加侦听器的 我曾尝试在ngOnInit()中添加侦听器，但它不起作用。(click)="selectMerchantFromMenu($event, merchant)">{{merchant.name}}</a>
<
浏览 8提问于2019-01-27得票数 0
回答已采纳
每次创建一个角度控制器时，我都会在上面添加一个事件侦听器。每次我离开这个页面并返回它时，都会添加一个新的事件侦听器，导致构造函数再次被调用。下面是添加事件侦听器的代码，以及它调用的侦听器函数：(仅供参考，我使用的是TypeScript)this.processApi = (e) => {
this.processApiMessage
浏览 17提问于2016-09-23得票数 0
回答已采纳
在JavaScript中，对于需要访问私有成员和函数的事件处理程序，我可以在我的事件处理程序函数中依赖这些成员和函数的函数作用域，并执行以下操作：之后的版本：在TypeScript中，我需要使用匿名函
浏览 0提问于2016-06-25得票数 26
回答已采纳
我试图在React中创建一个TypeScript组件，并希望添加一个自定义的拖放开始事件。element.removeEventListener("dragstart", dragStart);但是，在尝试添加自定义事件时‘(类型："dragstart"，侦听器：(这里: HTMLDivElement，e
浏览 3提问于2022-01-17得票数 0
1回答
我正在尝试使用React with TypeScript在控制台中记录window上的mousemove上的事件。经过一些研究和对的研究，我认为我可以使用MouseEvent作为传递给侦听器的事件的类型。properties from type 'MouseEvent<Element, MouseEvent>': altKey, button, buttons, clientX, and 18 more
我尝试使用其中的一些建议更新我的<
浏览 117提问于2021-05-23得票数 2
回答已采纳
我正在尝试找出窗口滚动侦听器上的事件的正确类型是什么，我找不到任何引用来修复这个错误，我看到人们只是分配any类型 const handleNavigation = (e: React.WheelEventhandleNavigation(e))}, []) 事件侦听器上的e参数出现TypeScript</em
浏览 85提问于2021-03-22得票数 3
回答已采纳
('video'); console.log(this) // Here "this" refers to typescript; vdo.addEventListener('pause', () => {
console.log(this) // Here "this" refers to t
浏览 10提问于2019-11-04得票数 2
回答已采纳
1回答
我试图在js中创建一组图像，并将事件侦听器添加到每个图像中，以便它们在单击时触发函数。 const img = new Image(100, 100); return img;当我尝试用image.addEventListener(...)添加事件侦听</e
浏览 2提问于2022-02-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
