Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS执行机制、事件模型、表单事件、事件冒泡、fetch的常用场景
Blogger Information
Blog 40
fans 0
comment 0
visits 27860
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的常用场景
初见
Original
553 people have browsed it

JS事件和异步

js运行机制：单线程+事件循环

  1. //1、单线程：主线程 //同一时刻，只能执行一段代码 不像c++java 可以并行
  2.       //一个任务接一个任务的执行，代码的书写顺序和执行顺序是一致的
  4.       console.log(1);
  6.       setTimeout(() => console.log(2), 3000);
  7.       setTimeout(() => console.log(4), 0);
  8.       //定时任务：setTimeout(函数，等待时间)
  9.       console.log(3);
  10.       //js引擎将第二个任务离开了主线程，放到了任务队列中
  11.       //当主线程执行完毕，由事件循环 将定时任务（异步任务）放回
  13.       console.log("---------");
  14.       // 定时任务就是异步任务，异步任务不在主线程执行
  16.       //执行机制
  17.       //1、同步任务：主线程
  18.       //2、异步任务：任务队列，事件循环来调度
  19.       //哪些是异步任务
  20.       //1、定时任务 2、事件 3、io操作 4、网络请求（http)
  21.       //实现异步 ？回调函数

单线程异步演示

  1. <form action="" style="display: grid; gap: 1em; width: 20em">
  2.       <input type="text" onkeydown="console.log(this.value)" />
  4.       <input
  5.         type="text"
  6.         onkeydown="setTimeout(()=>console.log(this.value),0)"
  7.       />
  8.       <input type="text" oninput="console.log(this.value)" />
  9.     </form>
  10.     <!-- 慢半拍 ？dom渲染是同步任务，keydown事件是异步任务 -->
  11.     <!-- 解决方案：异步事件等一等，等同步的dom渲染完成再执行 -->

事件增删

  1. <body style="display: grid; gap: 0.5em">
  2.     <!-- !1、事件属性 -->
  3.     <button onclick="alert('hello')">事件属性</button>
  5.     <!-- !!2、元素对象 -->
  6.     <button>元素对象</button>
  7.     <script>
  8.       const btn2 = document.querySelector("button:nth-of-type(2)");
  9.       btn2.onclick = () => console.log(111);
  10.       btn2.onclick = (_) => console.log(222);
  11.       btn2.onclick = ($) => console.log(333);
  12.       btn2.onclick = null;
  13.       // 覆盖事件
  14.     </script>
  16.     <!-- 3、事件监听器 -->
  17.     <button>事件监听器</button>
  18.     <script>
  19.       const btn3 = document.querySelector("button:nth-of-type(3)");
  20.       //btn3.addEventListener(事件类型，事件回调，是否冒泡false)
  21.       btn3.addEventListener("click", () => console.log(111));
  22.       btn3.addEventListener("click", () => console.log(222));
  23.       btn3.addEventListener("click", () => console.log(333));
  25.       let show = () => console.log(444);
  26.       btn3.addEventListener("click", show);
  27.       //删除
  28.       btn3.removeEventListener("click", show);
  29.     </script>
  31.     <!-- 4、事件派发 -->
  32.     <button>事件派发</button>
  33.     <script>
  34.       const btn4 = document.querySelector("button:nth-of-type(4)");
  35.       let i = 0;
  36.       btn4.addEventListener("click", () => {
  37.         console.log("恭喜又赚了：" + i + "元");
  38.         i += 0.5;
  39.       });
  40.       //创建一个自定义事件
  41.       const myclick = new Event("click");
  43.       //setTimeout定时任务 setInterval 执行间歇事件
  44.       setInterval(() => {
  45.         btn4.dispatchEvent(myclick);
  46.       }, 3000);
  47.     </script>
  48.   </body>

事件冒泡和事件委托

  1. <!-- event:事件对象 -->
  2.     <button onclick="show(event)">click</button>
  3.     <ul>
  4.       <li>item1</li>
  5.       <li>item2</li>
  6.       <li>item3</li>
  7.       <li>item4</li>
  8.       <li>item5</li>
  9.       <li>item6</li>
  10.     </ul>
  12.     <script>
  13.       function show(ev) {
  14.         // ev:事件对象
  15.         //console.log(ev.type);
  16.         //1 事件绑定者（主体）
  17.         console.log(ev.currentTarget);
  18.         //2 事件触发者
  19.         console.log(ev.target);
  20.         console.log(ev.currentTarget === ev.target);
  21.       }
  22.       const lis = document.querySelectorAll("li");
  23.       lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));
  24.       //冒泡：子元素的同名事件，会沿着dom树向上逐级触发上级元素的同名事件
  25.       //document.querySelector("ul").onclick = ev =>
  26.       //console.log(ev.currentTarget);
  27.       //document.querySelector("body").onclick = ev =>
  28.       //console.log(ev.currentTarget);
  29.       //document.documentElement.onclick = ev => console.log(ev.currentTarget);
  30.       document.querySelector("ul").onclick = ev => {
  31.         //1 事件绑定者
  33.         //console.log(ev.currentTarget);
  34.         //2 事件触发者
  35.         console.log(ev.target.textContent);
  36.         ///console.log(ev.currentTarget === ev.target);
  37.       };
  38.     </script>

表单事件

  1. <form action="" method="post" id="login" onsubmit="return false">
  2.       <label class="title">用户登录</label>
  3.       <label for="email">邮箱:</label>
  4.       <input type="email" id="email" name="email" value="" autofocus />
  5.       <label for="password">密码:</label>
  6.       <input type="password" id="password" name="password" />
  7.       <button name="submit">登录</button>
  8.     </form>
  9.     <script>
  10.       const login = document.forms.login;
  11.       //login.onsubmit = () => console.log("提交了");
  12.       //login.onsubmit = ev => ev.preventDefault();  onsubmit="return false"
  13.       login.submit.onclick = ev => {
  14.         //禁止冒泡
  15.         ev.stopPropagation();
  16.         //console.log(ev.currentTarget.form);
  17.         //非空验证
  18.         isEmpty(ev.currentTarget.form);
  19.       };
  20.       function isEmpty(form) {
  21.         console.log(form.email.value.length);
  22.         console.log(form.password.value.trim().length);
  23.         if (form.email.value.length === 0) {
  24.           alert("邮箱不能为空");
  25.           form.email.focus();
  26.           return false;
  27.         } else if (form.password.value.trim().length === 0) {
  28.           alert("密码不能为空");
  29.           form.password.focus();
  30.           return false;
  31.         } else {
  32.           alert("验证通过");
  33.         }
  34.       }
  35.       //input blur 失去焦点 change 值发生改变时触发 select 触发
  36.     </script>

json

  1. //1、json 就是一个字符串
  2.       //2、 json用对象或数组的字面量语法，来表示一组相关数据
  3.       let josnStr = `
  4.          {
  5.             "id":12,
  6.             "name":"JS是怎么练成的",
  7.             "price":99
  8.           }
  9.          `;
  11.       // 1 属性必须是字符串，必须使用双引号
  12.       //2、字符串类型必须使用双引号
  13.       // 3、最后一个数据后面不能有逗号
  15.       // 1、如何用到js中
  16.       //(1)json ->js对象
  17.       // （2）js对象->渲染到页面中
  18.       let book = JSON.parse(josnStr);
  19.       console.log(book);
  21.       let html = `
  22.         <ul>
  23.           <li>书号：${book.id}</li>
  24.           <li>书名：${book.name}</li>
  25.           <li>价格：${book.price} 元</li>
  26.       </ul>
  27.         `;
  28.       document.body.insertAdjacentHTML("afterbegin", html);
  30.       //json用到其他编程语言中，如php，java，python go
  31.       //js对象->json 字符串 ->由不同的语言的api处理
  32.       let obj = { id: 12, name: "JS是怎么练成的", price: 99 };
  33.       let str = JSON.stringify(obj);
  34.       console.log(str);

Promise Fetch

  1. // let arr = [1, 2, 3];
  2.       //pormise 契约 他是一个对象 表示异步操作的结果
  3.       //工作中不直接用promise ，而是用fetch api进行异步请求
  5.       //console.log(fetch("demo6.heml"));
  7.       //语法 fetch(url).then(相应回调函数).then(处理结果)
  8.       //console.log(response.json());
  9.       fetch("data.json")
  10.         .then(response => response.json())
  11.         .then(json => console.log(json));

fetch json 实例

json实例

  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 json 实例</title>
  8.   </head>
  9.   <body>
  10.     <!-- async  await -->
  11.     <button onclick="getPic()">查看图片信息</button>
  12.     <div id="box"></div>
  14.     <script>
  15.       //   fetch("https://jsonplaceholder.typicode.com/photos")
  16.       //     .then(response => response.json())
  17.       //     .then(json => console.log(json));
  18.       async function getPic() {
  19.         const pics = await fetch(
  20.           "https://jsonplaceholder.typicode.com/photos?albumId=2"
  21.         );
  22.         const list = await pics.json();
  23.         //console.log(list);
  24.         //渲染
  25.         render(list);
  26.       }
  27.       //   function render(data) {
  28.       //     const box = document.querySelector("#box");
  29.       //     const div = document.createElement("div");
  30.       //     data.forEach(item => {
  31.       //       //console.log(item);
  32.       //       const h2 = document.createElement("h2");
  33.       //       h2.innerHTML = '<a href="' + item.url + '">' + item.title + "</a>";
  34.       //       const img = document.createElement("div");
  35.       //       img.innerHTML =
  36.       //         '<a href="' +
  37.       //         item.url +
  38.       //         '"><img src="' +
  39.       //         item.thumbnailUrl +
  40.       //         '"></a>';
  41.       //       div.append(h2);
  42.       //       div.append(img);
  43.       //       box.append(div);
  44.       //     });
  45.       //   }
  46.       //改进
  47.       function render(data) {
  48.         const box = document.querySelector("#box");
  49.         const div = document.createElement("div");
  50.         data.forEach(item => {
  51.           //console.log(item);
  52.           const li = document.createElement("div");
  53.           li.innerHTML =
  54.             '<div class="lipic"><a href="' +
  55.             item.url +
  56.             '">' +
  57.             item.title +
  58.             '</a><a href="' +
  59.             item.url +
  60.             '"><img src="' +
  61.             item.thumbnailUrl +
  62.             '"></a></div>';
  64.           div.append(li);
  65.           box.append(div);
  66.         });
  67.       }
  68.     </script>
  69.     <style>
  70.       #box div .lipic {
  71.         display: grid;
  72.         grid-template-columns: 1fr 10rem;
  73.         gap: 2em;
  74.       }
  75.       #box div .lipic a:first-of-type {
  76.         color: #333;
  77.         line-height: 40px;
  78.         text-decoration: none;
  79.       }
  80.     </style>
  81.   </body>
  82. </html>
Correcting teacher：天蓬老师天蓬老师

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