JS单线程与事件循环

同一时刻,只有执行一个代码,不像C++,java,可以并行
一个任务接一个任务的执行,代码的书写顺序与执行顺序是一致的

 1.单线程:主线程
 console.log(1);
      setTimeout(() => console.log(2), 5000);
      setTimeout(() => console.log(4), 0);
//   定时任务: setTimeout(函数,等待时间)
      console.log(3);
       // js引擎将第二个任务离开了"主线程",放到了"任务队列"的地方
      // 当主线程上已没有任务的时候,由"事件循环"将这个任务重新放回到主线程中执行
      // 执行机制
      // 1.同步任务:主线程
      // 2.异步任务:任务队列,事件循环来调度
      // 以下是异步任务
      // 1.定时任务， 2.事件， 3.IO操作(input、output) 4.http 请求

单线程异步演示

<body>
    <form action="" style="display: grid; gap: 1em; width: 20em">
      <!-- 添加个事件,onkeydown事件属性 -->
      <input type="text" onkeydown="console.log(this.value);" />
      <!-- 输出会慢半拍,因为dom操作是同步任务,keydown是异步任务,所以总是获取上一个数据 -->
      <!-- 解决方案:就是让异步事件等等,等同步的dom渲染完了再执行 -->
      <!-- 在异步任务里在嵌套一个异步任务就行了 -->
      <input
        type="text"
        onkeydown=" setTimeout (()=>console.log(this.value),0);"
      />
      <!-- onkeydown改为onipunt可实现和上面一样的效果 -->
      <input type="text" oninput="console.log(this.value);" />
    </form>
  </body>

输出：

事件添加与删除

1.事件属性

<body style="display: grid; gap: 0.5em">
    <button onclick="alert('hello')">事件属性</button>

2.元素对象

    <button>元素对象</button>
    <script>
      const btn2 = document.querySelector("button:nth-of-type(2)");
      btn2.onclick = () => console.log(111);
      btn2.onclick = () => console.log(222);
      btn2.onclick = () => console.log(333);
      //   onclick以最后一个数据为准
      //   不让它显示
      //   btn2.onclick = null;
    </script>

3.事件监听器

    <button>事件监听器</button>
    <script>
      const btn3 = document.querySelector("button:nth-of-type(3)");
      // btn3.addEventListener(事件类型,事件回调,是否冒泡false/teue)
      // 添加事件类型
      btn3.addEventListener("click", () => console.log(111));
      btn3.addEventListener("click", () => console.log(222));
      btn3.addEventListener("click", () => console.log(333));
      let show = () => console.log(444);
      btn3.addEventListener("click", show);
      //   移除掉上方的(444)
      btn3.removeEventListener("click", show);
      let show = () => console.log(444);
      bth3.addEventListener("click", show);
      // 删除
      btn3.removeEventListener("click", show);
    </script>

4.事件派发


    <button>事件派发</button>
    <script>
      const btn4 = document.querySelector("button:nth-of-type(4)");
      let i = 10;
      btn4.addEventListener("click", () => {
        console.log("恭喜,你又赚了: " + i + "元");
        i += 100;
        i += 150;
      });
      // const btn4 = document.querySelector("button:nth-of-type(4)");
      // let i = 0;
      // btn4.addEventListener("click", () => {
      //   console.log("恭喜你, 又赚了: " + i + " 元");
      //   i += 0.5;
      // });
      // 创建一个自定义事件
      const myclick = new Event("click");
      // btn4.dispatchEvent(myclick);
      // setTimeout:定时器，用于执行一次性的定时任务
      // setInterval：定时器，用于执行间歇性的定时任务也
      setInterval(() => btn4.dispatchEvent(myclick), 3000);
    </script>
  </body>

事件冒泡和事件委托

event: 事件对象

 <body>
    <button onclick="show(event)">click</button>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <script>
      function show(ev) {
        // ev: 事件对象
        // console.log(ev.type);
        // ev中有二个特别重要的属性
        // 1. 事件绑定者(主体)
        console.log(ev.currentTarget);
        // 2.事件触发者(目标)
        console.log(ev.target);
        console.log(ev.target === ev.currentTarget);
      }
      //   const lis = document.querySelectorAll("li");
      // 循环给每一个li添加点击事件
      //   lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));
      //   onclick这种通过事件属性的添加的事件,是冒泡事件
      // 冒泡: 子元素的同名事件,会沿着dom树向上逐级触发上级元素的同名事件
      //   document.querySelector("ul").onclick = ev => console.log(ev.currentTarget);
      //   document.querySelector("body").onclick = ev => console.log(ev.currentTarget);
      //   document.documentElement.onclick = ev => console.log(ev.currentTarget);
      document.querySelector("ul").onclick = (ev) => {
        //   1.事件绑定者
        // console.log(ev.currentTarget);
        // 2. 事件触发者
        // console.log(ev.target);
        console.log(ev.target.textContent);
        // console.log(ev.target === ev.currentTarget);
      };
    </script>
  </body>

document.querySelector(“button”).onclick = null;

json

1.json:就是一个字符串
2.json:用对象或数组的字面量语法,来表示一组相关的数据

 <body>
    <script>
      // json字符串
      let jsonStr = `
          {
              "id":111,
              "name":"JS就该这样学",
              "price":99
          }
          `;

属性必须是字符串,且必须使用”双引号”
字符串类型的值必须使用”双引号”
最后一个数据后面不要有逗号

      // 1. json 如何用到 js中
      // (1)json -> js对象
      let book = JSON.parse(jsonStr);
      console.log(book);
      // (2) js对象渲染到页面中
      let html = `
            <ul>
                <li>书号:${book.id}</li>
                <li>名称${book.name}</li>
                <li>价格:${book.price}元</li>
          <ul>
         `;
      //   渲染到页面中
      document.body.insertAdjacentHTML("afterbegin", html);
      //   第二种方式json用在别的语言中,php,java,python,go ...
      // js对象 ==> json 字符串 --> 由不同的语言的api处理
      let obj = { id: 111, name: "JS就该这样学", price: 99 };
      //   js ->json
      let str = JSON.stringify(obj);
      console.log(str);
    </script>
  </body>

fetch的常用场景

fetch用来替代原来的 XMLHttpRequest 对象
拿 data1.json 文件模拟批量数据
data1.json代码

[
  { "id": 1, "name": "wjs", "course": "骑车/跑步/游泳" },
  { "id": 2, "name": "gzm", "course": "骑车/跑步/游泳" },
  { "id": 3, "name": "zyj", "course": "骑车/跑步/游泳" },
  { "id": 4, "name": "lzy", "course": "骑车/跑步/游泳" },
  { "id": 5, "name": "lkj", "course": "学习/踢球" }
]

fetch("data1.json")
        .then((response) => response.json())
        .then((json) => console.log(json));
      console.log(3);

输出：

JS的事件循环、添加、删除与派发、fetch常用场景

JS单线程与事件循环

事件添加与删除

事件冒泡和事件委托

json

fetch的常用场景