内联 JavaScript 处理器

HTML 中存在着真实的 JavaScript 代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
    <script>
        function createParagraph() {
           const para = document.createElement('p');
           para.textContent = '你点击了这个按钮！';
           document.body.appendChild(para);
          }
    </script>
  </head>
  <body>
    <button onclick="createParagraph()">点我呀</button>
  </body>
</html>

在 <button> 元素中包含了一个内联的 onclick 处理器，使得函数在按钮被按下时运行。效率低下。对于每个需要应用 JavaScript 的按钮，你都得手动添加 onclick="createParagraph()"属性。

可以使用纯 JavaScript 结构来通过一个指令选取所有按钮

document.addEventListener("DOMContentLoaded", function() {
  . . .
});

这是一个事件监听器，它监听浏览器的 "DOMContentLoaded" 事件，即 HTML 文档体加载、解释完毕事件。事件触发时将调用 " . . ." 处的代码，从而避免了错误发生

DOMContentLoaded这个事件可以替代window.onload事件，创建一个匿名函数。querySelectorAll获取标签button的句柄，然后绑定createParagraph()函数。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
    <script>
      document.addEventListener("DOMContentLoaded", function() {

        function createParagraph() {
          const para = document.createElement('p');
          para.textContent = '你点击了这个按钮！';
          document.body.appendChild(para);
        }
        
        const buttons = document.querySelectorAll('button');
        for(let i = 0; i < buttons.length ; i++) {
          buttons[i].addEventListener('click', createParagraph);
        }


      });
    </script>
  </head>
  <body>
    <button>点我呀</button>
  </body>
</html>

来源：https://www.cnblogs.com/17bdw/p/11694166.html

标签

javascript

内联元素

html代码