search

博客列表 >JS执行机制、事件模型、表单事件、事件冒泡、fetch的常用场景

JS执行机制、事件模型、表单事件、事件冒泡、fetch的常用场景

初见
初见原创
2021年09月30日 14:26:51552浏览

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>
上一条：1. 实例演示绝对定位与固定定位(完成课堂上的模态框案例) 2. 制作 思维导图,总结flex,grid属性,以及他们之间的区别,尽可能用简写下一条：盒模型、常用单位及媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多