解决TypeScript中'event'已弃用(ts6385)的代码改写求助

错误原因 #

直接使用全局event（对应window.event）在现代TypeScript中已被标记为弃用（TS6385），这是因为全局事件对象行为不稳定，不符合标准事件处理规范，必须通过事件处理函数的参数显式传递事件对象。

分步修改说明 #

1. 重构opentab函数

原函数依赖全局event获取当前点击的标签按钮，现在需要把事件对象作为参数传入，同时保留标签名参数：

• 新增event: MouseEvent参数，用于获取当前触发事件的元素
• 替换全局event.currentTarget为参数传入的event.currentTarget，通过类型断言明确元素类型（避免TS类型报错）
• 增加空值判断，防止找不到目标tab内容时出现报错

2. 替换事件绑定方式

原代码大概率是通过HTML内联onclick调用opentab，现在改用addEventListener批量绑定点击事件：

• 给每个tab按钮添加自定义属性（比如data-tab）存储对应的tab内容ID，实现HTML与JS解耦
• 循环遍历所有tab按钮，绑定点击事件时传递事件对象和对应的tabname

完整修改后代码 #

// 获取所有tab按钮和内容容器，添加类型断言明确元素类型
const tablinks = document.getElementsByClassName("tab-links") as HTMLCollectionOf<HTMLElement>;
const tabcontents = document.getElementsByClassName("tab-contents") as HTMLCollectionOf<HTMLElement>;

// 重构后的opentab函数，接收事件对象和目标tab名
function opentab(event: MouseEvent, tabname: string) {
    // 移除所有tab按钮的激活状态
    for (const tablink of tablinks) {
        tablink.classList.remove("active-link");
    }
    // 移除所有tab内容的激活状态
    for (const tabcontent of tabcontents) {
        tabcontent.classList.remove("active-tab");
    }
    // 给当前点击的tab按钮添加激活状态
    (event.currentTarget as HTMLElement).classList.add("active-link");
    // 给对应tab内容添加激活状态，增加空值判断避免报错
    const targetTab = document.getElementById(tabname);
    if (targetTab) {
        targetTab.classList.add("active-tab");
    }
}

// 批量给每个tab按钮绑定点击事件
for (const tablink of tablinks) {
    // 从自定义属性data-tab中获取对应的tab内容ID
    const tabname = tablink.getAttribute("data-tab");
    if (tabname) {
        tablink.addEventListener('click', (event) => {
            opentab(event, tabname);
        });
    }
}

对应HTML调整 #

需要给每个tab按钮添加data-tab属性，值为对应tab内容的ID：

<button class="tab-links" data-tab="tab1">标签1</button>
<button class="tab-links" data-tab="tab2">标签2</button>

<div class="tab-contents" id="tab1">标签1内容</div>
<div class="tab-contents" id="tab2">标签2内容</div>

对你尝试代码的修正 #

你之前写的监听代码有两个问题：

1. 仅给单个tablink绑定了事件，需要循环遍历所有tab按钮
2. 第二个参数传的是'active-tab'（这是类名），应该传对应的tab内容ID（比如'tab1'）

内容的提问来源于stack exchange，提问作者Mr.E