在前端开发中，DOM 事件处理是非常常见的任务。在 TypeScript 中使用正确的方式处理 DOM 事件将有助于代码的可维护性和可读性。在本文中，我们将讨论如何使用 TypeScript 正确的处理 DOM 事件，并提供示例代码。
使用 addEventListener 替代 on* 属性
在 TypeScript 中，我们应该使用 addEventListener 方法来添加事件处理程序，而不是使用传统的 on* 属性。使用 addEventListener 方法提供了更好的灵活性和可扩展性，并且与许多现代的 JavaScript 框架和库更兼容。
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
console.log("Button clicked!");
});使用 EventTarget 和 Event 类型
当添加一个事件监听器时，我们应该尽可能地将事件目标和事件类型指定为参数。这可以帮助 TypeScript 在编译时检测不正确的事件类型，并提供有关事件对象的更多信息。
const button = document.querySelector("button");
button.addEventListener("click", (event: MouseEvent) => {
console.log("Button clicked!", event.clientX, event.clientY);
});在许多情况下，我们希望自己定义事件。为此，我们可以使用 CustomEvent 类型。例如，我们可以定义一个自定义的 LoginEvent，并将其分发到 window 对象上：
-- -------------------- ---- -------
--------- -------------- -
--------- -------
--------- -------
-
----- ---------- ------- --------------------------- -
----------------- --------------- -
-------------- -
------- -----
---
-
-
------------------------ ------------ --------- ------- --------- ----- ----使用 Event.preventDefault() 和 Event.stopPropagation()
在 TypeScript 中，我们应该尽可能地使用 Event.preventDefault() 和 Event.stopPropagation()，而不是在事件处理程序中使用 return false。这可以帮助我们避免意外的全局事件。
const link = document.querySelector("a");
link.addEventListener("click", (event: MouseEvent) => {
event.preventDefault();
console.log("Link clicked!");
});使用 EventListenerOrEventListenerObject 类型
由于 TypeScript 3.9， EventListenerOrEventListenerObject 类型被添加到标准库中。这个类型可以是 EventListener 或 EventListenerObject，这有助于简化代码和提高可读性。
-- -------------------- ---- -------
----- ------ - ---------------------------------
----- ----------- ---------------------------------- - -
------------------ ----------- -
------------------- ---------- ------------
--
--
-------------------------------- ------------结论
在 TypeScript 中正确处理 DOM 事件可以提高代码的可维护性和可读性。使用 addEventListener、EventTarget 和 Event 类型，以及 Event.preventDefault() 和 Event.stopPropagation() 可以帮助我们编写更好的代码，并避免一些常见的错误。
希望这篇文章可以帮助你更好地处理 DOM 事件。如果你有任何问题或想分享你的经验，请在下面的评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ad60bda05147dd0249b94