javascript - 如何从 HTML 调用 "hover"上的 JS 函数？

Question

我必须捕捉“悬停”并在调用 JS 函数之后。我从html调用它。但什么也没有发生。我也尝试使用鼠标悬停 - 也不适用于 html。我必须捕获“悬停”，但不能在“悬停”时在 JS 文件中创建事件监听器。我可以将事件监听器放在“鼠标悬停”上，但当鼠标快速移动时它不能正常工作)。我犯了什么错误，我对 changeDef(event) 没有任何反应？

function changeDef(event){
  console.log(event.target);
}

<img class="img-default" src="./img/footer1.png" hover="changeDef(event)">

Answer 1

没有“悬停”事件。您确实使用了 mouseover 事件，该事件(使用 HTML 属性设置时)用事件名称前的 on 引用。即使鼠标快速移动也不会触发此事件。

function changeDef(event){
  console.log(event.target);
}

<img class="img-default" src="./img/footer1.png" onmouseover="changeDef(event)">

但是，您真的不应该使用 25 年以上的通过 HTML 属性设置事件处理程序的技术(它引入了 a variety of issues )，而是遵循现代标准和最佳实践，通过分离来自 HTML 的 JavaScript:

// Get a reference to the element that you want to work with
var img = document.querySelector("img.img-default");

// Set up an event handler. Notice that we don't use "on" in front
// of the event name when doing it this way.
img.addEventListener("mouseover", changeDef);

function changeDef(event){
  console.log(event.target);
}

img { width:50px; }

<img class="img-default" src="http://cdn.schoolstickers.com/products/en/819/GREEN-SMILE-00.png">

现在，在 CSS 中，元素可以处于悬停“状态”，如果您只想更改元素的样式，则根本不需要任何 JavaScript:

img { width:50px; border:2px solid rgba(0,0,0,0); }

img:hover { border:2px solid red; }

<img class="img-default" src="http://cdn.schoolstickers.com/products/en/819/GREEN-SMILE-00.png">