简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js 事件与 fetch api 简单总结
Blogger Information
Blog 49
fans 0
comment 0
visits 37716
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js 事件与 fetch api 简单总结
超超多喝水
Original
870 people have browsed it

js 事件与 fetch api 简单总结

js 运行机制

  • 同步任务：单线程（主线程）

js 是单线程运行，只有一个主线程，同一时刻只能执行一个代码，没有 c++、java 等的并行运行，单线程的任务只能一个个的执行，且执行顺序跟随用户的代码书写顺序。

  1. console.log(1);
  2. console.log(2);
  3. console.log(3);

单线程

  • 异步任务（事件循环与任务队列）

当 js 运行时遇到延时任务或耗时任务，js 引擎会自动将该任务离开主线程，将其加入到任务队列中，在所有主线程任务执行完毕后，由时间循环将该任务重新放回主线程开始执行。

  1. console.log(1);
  2. // 设置定时任务，延时3秒后输出
  3. setTimeout(() => console.log(2), 3000);
  4. console.log(3);

延时

  • 异步任务类型及解决
    类型：

    1. 定时任务
    2. 事件
    3. IO 操作（input 与 output），包括本地和远程
    4. 网络请求 http 请求

    解决：
    异步任务可以使用回调函数来实现异步回调，既保证了页面非延时数据能不被阻塞的显示出来，又保证位置能在原来的位置。

事件

事件的添加、删除与派发

  • 事件的添加的三种方式

    • 事件属性直接添加

      1. <button onclick="alert('hello')">事件属性</button>

    • 获取元素对象添加

      1. <button id="btn">元素对象</button>
      2. <script>
      3.   const btn = document.querySelector("#btn");
      4.   btn.onclick = () => console.log("111");
      5. </script>

    • 事件监听器添加(事件监听器添加的会都输出出来)

      1. <button id="btn">事件监听器</button>
      2. <script>
      3.   const btn = document.querySelector("#btn");
      4.   btn.addEventListener("click", () => console.log("111"));
      5.   btn.addEventListener("click", () => console.log("222"));
      6.   btn.addEventListener("click", () => console.log("333"));
      7. </script>

  • 事件删除

    • 行内事件属性添加的事件从 html 代码中删除即可
    • 元素对象可以给 onclick 事件赋值一个 null 清空值
    1. <button id="btn">元素对象</button>
    2. <script>
    3.   const btn = document.querySelector("#btn");
    4.   btn.onclick = () => console.log("111");
    5.   btn.onclick = null;
    6. </script>
    • 事件监听器可以将事件回调函数提前赋值给一个变量，使用:元素.addEventListener(事件类型,事件回调函数变量名,是否冒泡)来添加，使用元素.removeEventListener(事件类型,事件回调函数变量名,是否冒泡)来删除
    1. <button id="btn">事件监听器</button>
    2. <script>
    3.   const btn = document.querySelector("#btn");
    4.   const test = () => console.log("111");
    5.   btn.addEventListener("click", test);
    6.   btn.removeEventListener("click", test);
    7. </script>

  • 事件派发

    事件派发可以自动模拟派发执行一个事件，创建好事件监听执行后，使用：new Event(“事件名”)创建一个自定义事件，然后使用：元素.dispatchEvent(创建好的自定义事件)派发任务。

  1. <button id="btn">事件派发</button>
  2. <script>
  3.   //获取按钮
  4.   const btn = document.querySelector("#btn");
  5.   //给一个变量赋值，用在后面循环中
  6.   let i = 0;
  7.   //创建点击事件的执行内容，设置的变量自增+0.5
  8.   btn.addEventListener("click", () => {
  9.     console.log("已经扛了" + i + "吨砖");
  10.     i += 0.5;
  11.   });
  12.   //创建自定义点击事件
  13.   const myClick = new Event("click");
  14.   //使用btn.dispatchEvent(myClick)派发任务
  15.   setInterval(() => btn.dispatchEvent(myClick), 1000);
  16. </script>

事件冒泡

  • 事件对象，如<button onclick="show(event)">click</button>,函数 show 里面的(event)实参是一个固定值，只有 event 实参代表事件对象
  • 由于 event 是对象,他就有对应的一些如 type 之类的属性,但是其中有两个非常重要的属性:事件绑定者（主体）event.currentTarget、事件触发者（目标）event.target
  • 事件冒泡：onclick 这种通过事件属性添加的事件是冒泡事件，所谓冒泡事件就是如果父元素有子元素的同名事件，会沿着 dom 树向上逐级触发上级元素的同名事件
  • 事件委托：例如现在有一个无序列表，里面存在 100 个 li，我们想设置，点击每个 li 触发背景色产生一个变化，如果给 100 个 li 循环遍历或者一次添加点击事件就非常麻烦，但是我们利用事件冒泡的原理，只给父元素添加一个点击事件，就可以实现这个问题，这里因为 100 个 li 会显得太多，先以 10 个为例,设置点击后给 ul 添加一个背景色，然后先循环给所有 li 加 ul 的背景色，点击哪个 li，哪个 li 变色
  1. <ul onclick="changeColor(event)">
  2.   <li>item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5.   <li>item4</li>
  6.   <li>item5</li>
  7.   <li>item6</li>
  8.   <li>item7</li>
  9.   <li>item8</li>
  10.   <li>item9</li>
  11.   <li>item10</li>
  12. </ul>
  13. <script>
  14.   const lis = document.querySelectorAll("ul>li");
  15.   function changeColor(ev) {
  16.     for (let i = 0; i < lis.length; i++) {
  17.       const li = lis[i];
  18.       lis[i].style.backgroundColor = "lightgreen";
  19.     }
  20.     ev.target.style.backgroundColor = "hotpink";
  21.     ev.currentTarget.style.backgroundColor = "lightgreen";
  22.   }
  23. </script>

fetch api

使用 fetch api 进行异步请求,fetch(“链接地址”)获取到的是一个流格式数据，需要使用 fetch(“url”).then(响应回调函数).then(结果处理)来把流格式的数据转为 json。
fetch(“url”).then(响应回调函数).then(结果处理)链式调用:

  1. fetch("data.json").then((response) => response.json().then((json) => console.log(json)));

下面用接口做个简单的表格输出案例，获取 id 跟 title 输出到表格中：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>fetch api</title>
  8.     <style>
  9.       th,
  10.       td {
  11.         border: 1px solid;
  12.       }
  13.       table {
  14.         border-collapse: collapse;
  15.       }
  16.       caption {
  17.         font-weight: bolder;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <table>
  23.       <caption>
  24.         信息表
  25.       </caption>
  26.       <thead>
  27.         <tr>
  28.           <th>id</th>
  29.           <th>标题</th>
  30.         </tr>
  31.       </thead>
  32.       <tbody></tbody>
  33.     </table>
  34.     <script>
  35.       //获取tbody准备后续动态填充内容
  36.       const tbody = document.querySelector("table>tbody");
  37.       //异步回调函数，调取接口数据
  38.       async function data() {
  39.         const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  40.         const comments = await response.json();
  41.         // console.log(comments);
  42.         // count函数中处理数据
  43.         count(comments);
  44.       }
  45.       data();
  46.       function count(comment) {
  47.         // 对获取到的数据循环遍历
  48.         comment.forEach((item) => {
  49.           //创建一行两列
  50.           const tr = document.createElement("tr");
  51.           const iTd = document.createElement("td");
  52.           const tTd = document.createElement("td");
  53.           //给单元格填充内容并添加到表格中
  54.           iTd.textContent = item["id"];
  55.           tTd.textContent = item["title"];
  56.           tr.append(iTd, tTd);
  57.           tbody.append(tr);
  58.         });
  59.       }
  60.     </script>
  61.   </body>
  62. </html>

TEST

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！