Question

当我直接在html中包含对函数的引用时，我能够使onmousesenter正常工作，但读取这是一个糟糕的形式并希望改进我的代码 - 但现在我无法让它运行，尽管我的代码显示它确实触发了该功能，但我还不确定为什么其余部分现在无法运行：

<DOCTYPE! html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Sexism in Silicon Valley</title>
<script src="index.js"></script>
</head>
<body id="body1">
<div class="parent">
    <img src="kstartup.png" class="logos" id="id1"></img>
    <img src="uber.png" class="logos" id="id2"></img>
    <img src="kpcb.png" class="logos" id="id3"></img>
    <img id="id4" src="r1startup.png" class="logos"></img>
</div>

Javascript（index.js）：

function mouseenter() { 
    alert("hey");
    var z = document.getElementsByClassName("parent");
    for (var i = 0; i < z.length; i++) {
        z[i].style.background = "black";
    } 
    var bod = document.getElementById("body1");
    bod.style.background = "black";

} 
document.getElementById("id1").onmouseenter = mouseenter();

加载页面时警报会响起，而不是鼠标进入id1时。为什么我的鼠标没有输入id来触发它？

Answer 1

document.getElementById("id1").onmouseenter = mouseenter; // << no ()
// Assign, don't execute.

Answer 2

这里有很多问题：

doctype不正确
图片代码在HTML5中没有结束等价物，即</img>不存在（在XHTML中是一件事）
您尚未在<script>代码中包装JavaScript，因此它被解释为HTML
您在分配时正在调用mouseenter函数，因此您实际上是在分配结果。换句话说，您应该只为函数分配一个引用：document.getElementById("id1").onmouseenter = mouseenter

这里的工作示例：http://plnkr.co/edit/fmBIM7U6QSS0cl7vqdlQ?p=preview（显然图片不会加载，因为您只提供相对路径）

Answer 3

当您尝试访问ID id1元素时，您的文档DOM尚未就绪。

document.getElementById("id1").onmouseenter = mouseenter; // Don't execute()
// Since this code is inside HEAD, JS does not know about any #id1 Element yet.

因为您在结束<script>代码之前调用<head>内的</body>代码，而不是底部。

<script src="index.js"></script> <!-- Makes sure parser readed all the elements -->
</body>
</html>

无法触发onmouseenter事件？

3 个答案: