JavaScript添加方式

最新推荐文章于 2024-08-11 18:40:36 发布

程序员的客栈

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量914

点赞数 28

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/cmHuney/article/details/135783235

版权

内部JavaScript

在 </head> 标签结束前插入以下代码：

<script>
  // 在此编写 JavaScript 代码
</script>

在 <script>元素中添加以下JavaScript 代码：

document.addEventListener("DOMContentLoaded", () => {
  function createParagraph() {
    const para = document.createElement("p");
    para.textContent = "你好，你点击了";
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll("button");

  for (const button of buttons) {
    button.addEventListener("click", createParagraph);
  }
});

保存文件并刷新浏览器，然后你会发现，点击按钮文档下方将会添加一个新段落。

addEventListener方法是能够触发事件的对象，这就是推荐的添加事件处理器的机制。

完整代码展示：

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       document.addEventListener("DOMContentLoaded",()=>{
        function createParagraph(){
            const para = document.createElement("p");
            para.textContent = "你好，你点击了";
            document.body.appendChild(para);
        }
        const buttons = document.querySelectorAll("button");
        for(const button of buttons){
            button.addEventListener("click",createParagraph);
        }
       });
    </script>    
</head>
<body>
    <p>拜拜了</p>
    <button>这是一个按钮</button>
</body>
</html>

点击一次按钮，显示一句话，结果展示：

外部JavaScript

把 JavaScript 代码放置在一个外部文件中：

首先，在刚才的 HTML 文件所在的目录下创建一个名为 script.js 的新文件。请确保扩展名为 .js，只有这样才能被识别为 JavaScript 代码。

将 <script>元素替换为：

<script src="script.js" defer></script>

在 script.js 文件中，添加下面的脚本：

function createParagraph() {
  const para = document.createElement("p");
  para.textContent = "你点击了按钮！";
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}

保存并刷新浏览器，你会发现二者完全一样！区别在于，现在我们把 JavaScript 写进了一个外部文件。这样做一般会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

内联JavaScript处理器

注意，有时候你会遇到在 HTML 中存在着一丝真实的 JavaScript 代码。它或许看上去像这样：

function createParagraph() {
  const para = document.createElement("p");
  para.textContent = "你点击了按钮！";
  document.body.appendChild(para);
}

<button onclick="createParagraph()">点我！</button>

这个演示与之前的两个功能完全一致，只是在 <button>元素中包含了一个内联的 onclick 处理器，使得函数在按钮被按下时运行。

注意：请不要这样做。这将使 JavaScript 污染了 HTML，而且效率低下。对于每个需要应用 JavaScript 的按钮，你都得手动添加 onclick="createParagraph()" 属性。

程序员的客栈

关注

28
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JavaScript添加方式

这将使 JavaScript 污染了 HTML，而且效率低下。对于每个需要应用 JavaScript 的按钮，你都得手动添加。注意，有时候你会遇到在 HTML 中存在着一丝真实的 JavaScript 代码。addEventListener方法是能够触发事件的对象，这就是推荐的添加事件处理器的机制。这个演示与之前的两个功能完全一致，只是在 <button>元素中包含了一个内联的。处理器，使得函数在按钮被按下时运行。
复制链接

扫一扫