当前位置：首页 > 行业动态 > 正文

html调用的js

在HTML中调用JS可通过三种方式：1.内联脚本（直接写在元素事件属性中）；2.内部脚本（通过` 标签嵌入页面头部或尾部）；3.外部脚本（使用 引入独立JS文件），推荐将核心功能放在外部文件中，通过defer/async`控制加载时机，提升性能与维护性

内联脚本调用

通过<script>标签直接在HTML中编写JavaScript代码,适用于少量逻辑处理。

示例代码 说明
<script>alert("页面加载完成");</script> 直接在HTML中嵌入JS代码，随HTML解析立即执行
<button onclick="console.log('点击')">点我</button> 通过HTML事件属性调用内联JS函数

外部脚本调用

将JavaScript代码封装到独立文件，通过<script>标签引入,提升代码复用性。

html调用的js 第1张

关键属性 作用 示例
src 指定外部JS文件路径 <script src="main.js"></script>
type 声明脚本类型（默认可省略） <script type="text/javascript" src="app.js"></script>

事件驱动调用

通过HTML元素事件属性或添加事件监听器触发JS执行。

绑定方式 示例代码 说明
行内事件 <img src="pic.jpg" onload="showImage()"> 元素加载完成时调用showImage函数
事件监听 document.getElementById('btn').addEventListener('click', function() { ... }) 通过JS代码动态绑定事件

异步加载脚本

使用async或defer属性控制脚本加载行为,优化页面性能。

属性 加载时机 执行顺序
async 下载完立即执行 不保证执行顺序
defer 下载完执行 按顺序执行并等待DOM解析完成
无属性 同步加载阻塞渲染 按顺序执行

模块化调用（ES6+）

通过<script type="module">引入模块化JS,支持ES6导入导出语法。

<script type="module" src="main.js"></script>
// main.js
import { greet } from './utils.js';
greet('World');

问题与解答

Q1：如何确保外部脚本加载完成后再执行？
A：可通过以下方式实现：

  1. 使用defer属性：<script src="app.js" defer></script>
  2. 监听load事件： 
    const script = document.createElement('script');
script.src = 'app.js';
script.onload = () => { console.log('脚本加载完成'); };
document.head.appendChild(script);

Q2：多个脚本文件如何控制执行顺序？
A：方法包括：

  1. 按顺序排列<script>标签（同步加载）
  2. 使用defer属性（按顺序执行）
  3. 显式依赖管理： 
    <script src="base.js" defer></script>
<script src="utils.js" defer></script>
<script src="main.js"
domjavascript
0

相关文章