Fatal编程技术网
  • javascript/
  • 将内联Javascript转换为外部Javascript

将内联Javascript转换为外部Javascript

javascript

将内联Javascript转换为外部Javascript,javascript,external,mouseover,Javascript,External,Mouseover,我有下面的内联javascript（在mouseover上显示一个版本），我正在工作。我被告知它需要是外部的，所以我创建了一个.js文件并在头部链接到它，删除了标记，但我无法让它作为链接的js文件工作。我对这一点很陌生，我相信这是一件非常简单的事情，我不理解，任何帮助都是非常感谢的 <!DOCTYPE html> <html> <head> <title>template_test</title> <link href=

我有下面的内联javascript（在mouseover上显示一个版本），我正在工作。我被告知它需要是外部的，所以我创建了一个.js文件并在头部链接到它，删除了标记，但我无法让它作为链接的js文件工作。我对这一点很陌生，我相信这是一件非常简单的事情，我不理解，任何帮助都是非常感谢的

<!DOCTYPE html>

<html>
<head>
  <title>template_test</title>
  <link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
  <div class="section group box">
    <img src="icon-student.png" width="75" height="75">

    <h1>Sub Title for Section</h1>

    <p>Ut molestie mattis ultrices. Suspendisse malesuada turpis non neque tincidunt
    dignissim. Curabitur venenatis vehicula augue, ac venenatis felis aliquam ut.
    Curabitur aliquet turpis nec lorem commodo.</p>
  </div>

  <div id="versionHidden" onmouseover=
  "document.getElementById('hiddenVersion').style.display = 'block';" onmouseout=
  "document.getElementById('hiddenVersion').style.display = 'none';">
    <div id="hiddenVersion" style="display: none;">
      Version 2.0
    </div>
  </div>

  <div id="clear">
    <br>
  </div>
</body>
</html>


模板试验
第节的子标题
马蒂斯乌尔特里斯大学。马勒苏阿达turpis非内克tincidunt酒店
显贵。维尼那提汽车库拉索酒店。
库拉比图尔皮斯酒店

版本2.0
添加到HTML的
：

<script src="myJSFile.js"></script>
这样做的好处是，您不需要任何内联操作，因此可以完全控制web应用程序中的行为，而无需弄乱文档结构

当我们将脚本标记放在头部（与页面底部相反）时，我们添加代码以等待
DOMContentLoaded
事件，因为如果脚本标记在“versionHidden”元素之前，那么浏览器呈现脚本标记时没有“versionHidden”元素，因此
document.getElementById（'versionHidden'））如果不等待
DOMContentLoaded
事件，则
将为
null

在文档末尾添加一个脚本标记可以避免使用
DOMContentLoaded
，雅虎建议这样做是为了提高性能（因为在脚本运行时浏览器不会阻止加载和呈现页面的其余内容），但是1）在加载脚本之前，您可能不希望页面可见，2）一些纯粹主义者（和我一样）觉得脚本实际上不是文档的一部分，因此，出于概念上的原因而不是实践上的原因，不应该放在主体中，而是放在头部


注意，上面的代码需要一个现代浏览器来工作；为了支持老浏览器，考虑使用jQuery。
但是请注意，上面的代码不会很有用，因为使用display none将意味着元素被完全删除，因此不需要鼠标悬停

您可能希望改用此选项：


window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.visibility = 'visible';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.visibility = 'hidden';
    }, false);
}, false);


…并将HTML元素更改为：


<div id="hiddenVersion" style="visibility: hidden">







这将为项目保留空间，但只是将其隐藏。
将鼠标事件包装到外部.js文件中的函数中


function mouse(d) {
    document.getElementById('hiddenVersion').style.display = d;
}


然后在versionHidden元素上


<div id="versionHidden" onmouseover="mouse('block');" onmouseout="mouse('none');">



您发布的代码标题中没有JS文件。要正确链接JS文件，请执行以下操作：


<head>
    <script type="text/javascript" src="myscript.js"></script>
</head>







这里的更多信息：
告诉我们您尝试了什么。今天不建议使用
onmouseover
和
onmouseout
。在现代实践中，我们应该将JS与HTML代码分开。这非常有效，谢谢。（d）只是某种占位符，意味着它可能是（k）或类似的，还是（d）呢在JS中有什么特别的意思吗？@ConnorLaCombe这个概念背后的大理论，叫做.MVC就是其中一个例子。@user3277801是的，d就是我选择的变量。你可以把任何你想要的变量传递给函数。@ShivanRaptor同意不同意：）对不起，我不清楚，我这么做了，但是我无法使用相同的代码让外部js工作。显然，代码必须修改，并且明显地基于Brett的示例，这对我来说确实有效。我已经做了一个更新，因为我认为您不想使用display:none。旁注：建议使用jQuery是好的，但是，jQuery 2将放弃对旧浏览器的支持，特别是IE7和IE8。

<head>
    <script type="text/javascript" src="myscript.js"></script>
</head>