事件的添加方式，fetch的常用场景

事件添加方式

① 事件属性添加

 <button onclick="alert('面包')">事件属性</button>

② 元素对象

    <button>元素对象</button>
    <script>
      const btn2 = document.querySelector("button:nth-of-type(2)");
      btn2.onclick = () => console.log(巧克力面包);
      btn2.onclick = (_) => console.log(罗宋面包);
      btn2.onclick = ($) => console.log(荞麦面包);
    </script>

③ 事件监听器

<button>事件监听器</button>
    <script>
      const btn3 = document.querySelector("button:nth-of-type(3)");
      btn3.addEventListener("click", () => console.log(巧克力面包));
      btn3.addEventListener("click", () => console.log(罗宋面包));
      btn3.addEventListener("click", () => console.log(荞麦面包));
      let show = () => console.log(蜂蜜面包);
      btn3.addEventListener("click", show);
      btn3.removeEventListener("click", show);
    </script>

④ 事件派发

<button>事件派发</button>
        <script>
          const btn4 = document.querySelector("button:nth-of-type(4)");
          let i = 1;
          btn4.addEventListener("click", () => {
            console.log("恭喜你, 获得面包: " + i + " 个");
            i += 1;
          });
          // 创建一个自定义事件
          const myclick = new Event("click");
          setInterval(() => btn4.dispatchEvent(myclick), 3000);
        </script>

fetch的常用场景

<button onclick="getList()">留言列表</button>
    <div id="box">
      <!-- 显示留言信息 -->
    </div>
    <script>
      async function getList() {
        // 请求100条留言
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts"
        );
        const comments = await response.json();
        // 将所有数据渲染到页面中
        render(comments);
      }
      function render(data) {
        const box = document.querySelector("#box");
        // 有序列表
        const ol = document.createElement("ol");
        data.forEach((item) => {
          console.log(item);
          const li = document.createElement("li");
          li.textContent = item.body.slice(0, 100) + "...";
          li.innerHTML = `<span style="color:green">${item.body.slice(
            0,
            100
          )} ...</span><hr>`;
          ol.append(li);
        });
        box.append(ol);
      }
    </script>