TypeScript 中将 Click 事件监听器添加到按钮
在 TypeScript 中为按钮添加点击事件监听器：
- 选择按钮元素。
-
使用
addEventListener()方法为其添加点击事件监听器。 - 每次单击按钮时，该方法都会调用一个函数。
以下是本文示例的 HTML。
index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Click</button> <script src="./src/index.ts"></script> </body> </html>
这是相关的 TypeScript 代码。
index.tsconst button = document.getElementById('btn'); button?.addEventListener('click', function handleClick(event) { console.log('button clicked'); console.log(event); console.log(event.target); });
我们使用 document.getElementById 方法来选择按钮元素。
如果在 DOM 中找不到具有提供的 id 的元素，
getElementById方法将返回 null，因此如果按钮变量存储 null 值，我们必须使用可选的链接?.运算符来短路。
我们在按钮元素上调用了 addEventListener 方法。
ddEventListener 方法有两个参数：
- 要监听的事件类型。
- 每次触发事件时调用的函数。
每次单击按钮时都会调用示例中的函数，并将消息记录到控制台。
事件参数是一个包含许多不同属性的对象。 例如，event.target 指的是被点击的按钮。
我们可以使用相同的方法为多个按钮添加点击事件监听器。
const buttons = Array.from(document.getElementsByClassName('btn'));
buttons.forEach(btn => {
btn.addEventListener('click', function handleClick(event) {
console.log('button clicked');
console.log(event);
console.log(event.target);
});
});
我们使用 document.getElementsByClassName 方法来选择具有 btn 类的元素集合，并将该集合转换为数组。
我们传递给 forEach() 方法的函数会为数组中的每个元素（按钮）调用，并为每个元素添加一个点击事件监听器。
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间：2023/04/14 浏览次数：153 分类：Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间：2023/03/19 浏览次数：181 分类：TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理，并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间：2023/03/19 浏览次数：97 分类：TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间：2023/03/19 浏览次数：172 分类：TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间：2023/03/19 浏览次数：161 分类：TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间：2023/03/19 浏览次数：182 分类：TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例，并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间：2023/03/19 浏览次数：221 分类：TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便，实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间：2023/03/19 浏览次数：110 分类：TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。
