如何使用addEventListener实现按钮点击跳转至另一个HTML页面？

你只需要在addEventListener的点击回调函数中添加页面跳转逻辑即可，以下是两种常用的实现方式：

方法一：使用window.location.href（支持返回原页面） #

这种方式和普通点击链接的行为一致，会在浏览器历史记录中保留当前页面，用户可以通过返回按钮回到原页面。

完整代码：

HTML #

<button>submit</button>

JavaScript #

let btn = document.querySelector('button')
btn.addEventListener('click', () => {
    // 将此处替换为你的目标HTML页面路径
    window.location.href = 'target-page.html';
})

方法二：使用window.location.replace()（不支持返回原页面） #

如果不需要用户返回原页面，可以用这种方式，它会替换当前页面在浏览器历史中的记录，点击返回会回到跳转前的上一页。

完整代码：

HTML #

<button>submit</button>

JavaScript #

let btn = document.querySelector('button')
btn.addEventListener('click', () => {
    // 将此处替换为你的目标HTML页面路径
    window.location.replace('target-page.html');
})

注意：目标页面路径要根据实际文件结构填写，比如同目录下直接写文件名，子目录则写sub-folder/target-page.html，外部链接写完整URL（如https://example.com）。

内容的提问来源于stack exchange，提问作者Marvelographer