javascript - 和 事件的图像翻转

Question

根据作者的说法，我正在观看视频教程应该使用 CODE #2，但我将其稍微更改为 CODE #1那么这两种代码有什么区别，都执行相同的任务，这里有什么技术或好的做法吗？

代码 #1:使用事件处理程序 MouseOver 和 MouseOutof 标签

<a href="http://www.google.com" > 
    <img alt="arrow" name="ArrowImage" 
         onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
         onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
         src="Images/arrow_off.gif" />
</a>

代码#2:使用标签的事件处理程序 MouseOver 和 MouseOut

<a href="http://www.google.com" 
   onmouseover="document.arrow.src='images/arrow_on.gif'"
   onmouseout="document.arrow.src='images/arrow_off.gif'">
     <img src="images/arrow_off.gif" width="147" height="82" 
          name="arrow" alt="arrow" />
</a>

Answer 1

如果 <a> 中没有格式或附加内容，您可以使用其中任何一个，这不会有什么不同。

如果链接中有 CSS 格式或附加内容，<a> 的边界可能与 img 的边界不同.在这种情况下，这取决于实际意图:您是想仅在将鼠标悬停在图像上还是在悬停链接的其余部分时更改图像源。

但由于您要求的是良好实践:建议不要使用内联 JavaScript，即不要混合使用 HTML 和 JavaScript。在应用良好实践时，您可能会在单独的 <script> 中捕获鼠标事件。在 HTML 文档的底部或使用 CSS 定义样式 :hover伪类。