1.内联(Inline)方式
内联(Inline)方式，又称为行内方式。往往用于单个元素。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p id="demo">This is a paragraph</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Paragraph changed'">Try it</button>
</body>
</html>2.内部(Internal)方式
往往用于单个网页。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p id="demo">This is a paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed";
}
</script>
</body>
</html>3.外部(External)方式
往往用于所有网页。
//目录结构
demo/
index.html
myscript.js//index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p id="demo">This is a paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myscript.js"></script>
</body>
</html>//myscript.js(注意：不能包含<script>元素)
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed";
}4.优先级
比如上面的示例中 myFunction() 事件处理程序函数，当同时存在多种使用 JavaScript 的方式中存在相同的函数名时，则优先级如下：
内联方式优先级最高。
其次，内部方式和外部方式的优先级取决于它们放置在 <head> 元素或者 <body> 元素中的前后顺序，后面的永远覆盖前面的。情形如下：
- 后面的内部方式优先级 > 前面的内部方式。
- 后面的内部方式优先级 > 前面的外部方式。
- 后面的外部方式优先级 > 前面的外部方式。
- 后面的外部方式优先级 > 前面的内部方式。
5.<script>元素位置
注意：<script> 元素只支持内部方式或外部方式。
过去，所有 <script> 元素都被放在 <head> 元素内，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 这里是外部CSS -->
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>这样做的好处是把外部的 CSS 和 JavaScript 文件都集中放在一起，缺点就是，必须把所有的 </head> 标签之前的 JavaScript 文件都下载、解析和解释执行完成后，才能开始渲染 <body> 标签后的页面内容。对于需要很多 JavaScript 的页面，这会导致页面渲染明显延迟，在此期间浏览器窗口完全空白。为了解决此问题，可将所有或者部分 <script> 元素放在结束标签 </body> 的紧挨着前面，如下所示：
<!DOCTYPE html>
<html>
<head>
<!-- 这里是外部CSS -->
</head>
<body>
<!-- 这里是页面内容 -->
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
</body>
</html>原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/experience/javascriptexp/31817.html
微信扫一扫 
支付宝扫一扫