apply-javascript-internal

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smart-girl/p/10717467.html

文章标签：

#javascript #ViewUI

本文展示了一个使用JavaScript封装函数的实例，该函数在页面加载完成后执行，通过监听按钮点击事件来创建并添加段落元素到页面中。此示例展示了如何使用DOM API进行页面元素的动态生成和事件绑定。

代码如下：喜欢这种封装方式

<!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/smart-girl/p/10717467.html