如何用纯HTML/JavaScript实现鼠标悬停文本时弹出alert提示？

1. 已有代码错误梳理 #

• 第一版代码仅完成了触发逻辑的函数定义，未和对应HTML文本元素的mouseover事件做关联，浏览器无法识别函数的触发时机，因此不会执行代码。
• 第二版代码存在API调用错误：alert()是window对象下的全局方法，不属于DOM元素实例，不能通过document.getElementById("xxx").alert()的格式调用。

2. 正确实现方案 #

方案1：HTML行内绑定事件 #

直接在目标文本的标签上声明悬停事件触发的函数，逻辑简单直观：

<!-- HTML代码 -->
<p id="text" onmouseover="showAlert()">需要悬停触发提示的文本内容</p>

// JS代码
function showAlert(){
    alert("Alert!");
}

方案2：JS动态绑定事件 #

符合视图与逻辑分离的开发规范，不需要修改HTML标签属性，全部通过JS完成绑定：

<!-- HTML代码 -->
<p id="text">需要悬停触发提示的文本内容</p>

// JS代码
// 等待DOM渲染完成后再执行绑定逻辑，避免找不到目标元素
window.onload = function(){
    const targetEle = document.getElementById("text");
    // 绑定mouseover事件
    targetEle.addEventListener("mouseover", function(){
        alert("Alert!");
    });
}

如果JS代码写在HTML文件末尾</body>标签之前，可省略window.onload的包裹，此时DOM已经完成渲染，可以直接获取到目标元素。

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