任务队列、事件、冒泡、fetch使用

作业内容：
1. [可选]JS单线程与事件循环,任务队列,解决了什么问题? 
2. 事件的添加方式有哪些?事件删除,事件派发是怎么实现的? 
3. 事件冒泡是什么意思 ? 事件冒泡是如何实现事件委托的? 
4. fetch的常用场景,自己找一些json数据进行测试

1. [可选]JS单线程与事件循环,任务队列,解决了什么问题?

单线程保证和任务的顺序执行，而任务队列让那些可能比较耗时间的任务通过事件循环来控制不至于产生阻塞，可以确保主线程的正常运行。
代码演示：

function clg(num) {
    return console.log(num);
}
clg(1);
setTimeout(() => clg(2), 1000);
clg(3);
// 输出：1,3,2

2. 事件的添加方式有哪些?事件删除,事件派发是怎么实现的?

事件的添加方式主要有以下内种：

• 通过元素的事件属性添加

<button onclick="alert(1);">点击</button>

• 通过元素对象（元素对象里的onclick只能执行一次，如果有多条，则只执行最后一条。

<button>点击</button>
<script>
    let btn1 = document.querySelector("button");
    btn1.onclick = () => console.log("按钮被点击了");
</script>

这个删除比较简单

// 删除click事件
btn1.onclick = null;

• 事件监听器，用addEventListener可以对同一个元素添加多个事件

let btn1 = document.querySelector("button");
// addEventListener(事件, 回调, 冒泡=默认，可以省略)
btn1.addEventListener("click", () => console.log("事件监听器"), false);

这个删除必须要指定回调函数名，上面代码可修改如下：

let btn1 = document.querySelector("button");
let fun1 = () => console.log("事件监听器");
btn1.addEventListener("click", fun1, false);
btn1.removeEventListener("click", fun1);

事件派发的实现：

// new 一个新的事件对象出来
let myEvent = new Event("click");
// 然后用dispatchEvent来派发
btn1.dispatchEvent(myEvent);

3. 事件冒泡是什么意思 ? 事件冒泡是如何实现事件委托的?

事件冒泡指的是任何元素触发事件，他的逐个上级元素都会触发相同的事件，只不过对于当前元素来说，他的的主体和目标是一致的。所以通常会在元素的上级元素上绑定事件，委托执行。

<ul class="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
</ul>
<script>
    function fn(ev) {
        // 如果需要停止冒泡，则可以用这一句代码
        // ev.stopPropagation();
        console.log("[当前主体]：" + ev.currentTarget.textContent);
        console.log("[当前目标]：" + ev.target.textContent);
    }
    let lis = document.querySelector(".list");
    [...lis.children].forEach((element) => {
        element.onclick = fn;
    });
    lis.onclick = fn;
</script>

4. fetch的常用场景,自己找一些json数据进行测试

常用的JSON网站：
https://jsonplaceholder.typicode.com

<style>
    .t {
        border-collapse: collapse;
    }
    .t > tbody > tr > td,
    th {
        border: 1px solid red;
        padding: 0.5em;
    }
</style>
<table class="t">
    <tbody>
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>username</th>
            <th>email</th>
        </tr>
    </tbody>
</table>
<script>
    let html = "";
    fetch("https://jsonplaceholder.typicode.com/users")
        .then((response) => response.json())
        .then((data) => {
            data.forEach((e) => {
                html += "<tr>";
                html += "<td>" + e.id + "</td>";
                html += "<td>" + e.name + "</td>";
                html += "<td>" + e.username + "</td>";
                html += "<td>" + e.email + "</td>";
                html += "</tr>";
            });
            let tbody = document.querySelector("table>tbody");
            tbody.insertAdjacentHTML("beforeEnd", html);
        });
</script>