Web API

Web API

作用、分类

作用：通过js去操作html和浏览器

DOM（文档对象模型）和BOM（浏览器对象模型）

DOM

**DOM：**文档对象模型，操作网页内容的功能 作用：开发网页内容特效和实现用户交互的API

DOM树：直观体现了标签和标签之间的关系，html文档以树状结构表现出来

DOM对象

浏览器根据html标签生成的js对象：所有的标签属性都能在这个对象上找到，修改这个对象属性会自动映射到标签身上。

DOM核心： 把网页内容当作对象来处理，

DOM对象 :由DOM里提供的一个对象，提供的属性和方法都是用来访问和操作网页内容的。

获取DOM对象：

查找元素DOM元素就是选择页面中标签元素

1.想要获取页面的标签 可以通过 **document.querySelector("")**选择器；

2.querySelector()只能获取第一个满足条件的标签

3.如果选择器找不到元素（标签名写错或者没有这个标签）querySelector()返回值为null 找的到返回dom元素

4.输出和打印dom元素 用console.dir()

    <i>今天天气好</i><br>
    <u>谁出去玩</u>
    <script>
        let userName=prompt("请输入用户名称");
        let uDom=document.querySelector("u");/* 选中u标签 */
        uDom.innerText=userName;/* 把u标签内部文本修改为用户输入的名称 */
    </script>

document.querySelectorAll("ul li")不管选择器有没有写对返回值都是一个伪数组，如果要得到数组中所有对象通过遍历（for）的方法 能找到返回dom元素 找不到是空数组Nodelist[]；

 <script>
        let list=document.querySelectorAll("li");
        // console.dir(list);/* 五个dom元素li */
        for (let index = 0; index < list.length; index++) {
            list[index].innerText=`输出li`+index;/* 遍历li标签并且改变li里面内容改变 */
        }     
    </script>

其他获取DOM元素方法（了解）

let divDom=document.getElementsByClassName("title") /* 根据类名选择标签 */
       let          ps=document.getElementsByTagName("p");/* 根据标签名字选页面中所有p的标签 */
let divs=document.getElementById("s")/* 根据id名选择标签 */

设置文本内容的方法：

1. document.write();只能追加到前面位置，文本中包含的标签会被解析
2. 对象.innerText=修改内容；只能解析文字不能解析标签
3. 对象.innerHTML=' 修改内容；可以解析文字也可以解析html标签

  document.write();/* 很少使用 */
        document.querySelector('li:nth-child(2)').innerText="<button>修改内容</button>"/* 只能解析文字不能解析标签 */
        document.querySelector('li:nth-child(3)').innerHTML=' <button>修改内容</button>'/* 可以解析文字也可以解析html标签 */

设置或修改标签属性

通过js设置或修改标签元素属性，通过src更换图片等 标签中有等号的就是属性名和属性值

修改元素样式属性：

style属性操作css：

1.属性如果有-连接符，需要转换小驼峰命名

2.修改样式通过style属性引出

3.赋值时候加单位

body修改rgba中的随机颜色

 <script>
       /* 1.因为rgba颜色所有要定义函数可以调用很多次 */
       /* 2.定义完函数开始调用rgb取值（0，255） a（0，1）*/
       /* 3.给body增加样式 */
       function getRandomColor(min,max) {
           return Math.round(Math.random()*(max-min)+min)
       }
       let color1=getRandomColor(0,255);
       let color2=getRandomColor(0,255);
       let color3=getRandomColor(0,255);
       let color4=getRandomColor(0,1);
       document.body.style.backgroundColor=`rgba(${color1},${color2},${color3},${color4})`
   </script> 

className动态修改样式

1.可以同时设置多个class 以空格分开

2.并且有覆盖性 新值可以替换旧值

 let divdom=document.querySelector('div');
        divdom.className="change r"/* 可以同时设置多个class 以空格分开 并且有覆盖性 新值可以替换旧值 */

classList动态修改样式：

 let divdom=document.querySelector('div');
        divdom.classList.add("change","r");/* 利用classlist给元素增加类可以增加多个类中间，隔开 */
        divdom.classList.remove("change");/* 单独来指定删除一个class */
        divdom.classList.toggle("s");/* 切换一个类 如果有就移除 如果没有就增加 */

设置/修改表单元素属性：

innerText 、innerHTML主要设置双标签的 设置单标签没效果 一般用表单属性.value来修改表单内容 也可以修改表单的类型。

表单属性中添加就有效果，移除就没效果一律用布尔值表示真就是有这个属性 假就是没有这个属性：disabled、selected、checked

设置表单属性修改表单内容：

1.设置普通输入框 Dominput.value='表单的值';

<input type="text" class="username">
document.querySelector(".username").value="我的用户名"/* 输入文本框内容 */

2.设置按钮禁用/启用 disabled禁用的意思

<button class="code">发送验证码</button>
 document.querySelector(".code").disabled=true   禁用
 document.querySelector(".code").disabled=false  启用

3.设置复选框或者单选框按钮默认选中/取消 checked

<input type="checkbox"  class="agree"><!-- 复选框 -->
<input type="radio"  id="single"><!-- 单选框 -->
document.querySelector(".agree").checked=true/* 自动勾选复选框 */       document.querySelector(".agree").checked=false/* 不勾选复选框 */
document.querySelector("#single").checked=true/* 自动勾选单选框 */
document.querySelector("#single").checked=false/*  自动取消勾选单选框 */

4.设置下拉列表 selected

 <select class="sel"><!-- 下拉框 -->  
       <option>北京</option>
       <option>上海</option>
       <option>长沙</option>
       <option>南京</option>
       <option>广州</option>
    </select>
document.querySelector("option:nth-child(2)").selected=true;/* 默认选中下拉框的第三个选项 */

5.文本域标签：属于表单元素也属于双标签 设置文本域的内容直接在html页面书写

<textarea cols="30" rows="10" ><h1>我是如此的相信</h1></textarea>/* 直接在html页面书写文本域内容 */
// 通过js添加文本域中的内容
document.querySelector('textarea').value=`<h1>我是如此的相信</h1>`;
document.querySelector('textarea').innerText=`<h1>我是如此的相信</h1>`;
document.querySelector('textarea').innerHTML=`<h1>我是如此的相信</h1>`;

获取文本域中的值 innerText不能获取文本域中的值

console.log(document.querySelector('textarea').value);/* 可以获取文本域中的值 <h1>我是如此的相信</h1>*/
console.log(document.querySelector('textarea').innerHTML);/* &lt;h1&gt;我是如此的相信&lt;/h1&gt  */
console.log(document.querySelector('textarea').innerText);/* 不能获取文本域中的值 */

定时器-间歇函数

开启定时器：能够使用定时器函数重复执行代码

定时器返回值是一个id数字

定时器有两个参数 函数和时间 时间是以毫秒为单位的

设置定时器方法一：

  function set() {
           console.log("这是个定时器");
       }
       setInterval (set,1000);/* 第一种写法 */

设置定时器方法二：

 setInterval(function() {
           console.log("定时器");
       },1000)/* 第二种写法 */

关闭定时器

一般不会刚创建就停止，需要满足一定条件后再停止

用定时器实现循环轮播图片效果

  <img src="" alt=""><!-- 选一个图片标签 -->
    <script>
        let index=1;/* 图片从第一张到第九张切换 */
        setInterval(function () {/* 定时器 */
        //   console.log(index); /* 打印在控制台看效果 */ 
        document.querySelector('img').src=`./images/b0${index}.jpg`;/* 修改dom对象img里面图片路径 */
          index++;if (index===10) {/* 当图片播放到第十张的时候 令第十张图片等于第一张图片就会实现循环 */
              index=1;
          }
        },1000)
    </script>

事件

事件：是在编程时系统内发生的动作或者发生的事情

事件监听：一旦有事件触发 立即调用一个函数做出响应 也称注册事件

dom元素.addEventListener('事件'，要执行的函数)；

事件监听三要素：

事件源：获取dom元素

事件：事件类型加引号怎么触发事件（click ）

事件处理程序：做什么事情

点击按钮数字减一

 <script>
         let time=1001;
         document.querySelector("button").addEventListener("click",
         function () {
          time--;
          document.querySelector("button").innerText=`这是倒计时${time}次点击`
        })
    </script>

事件类型：

鼠标事件：click 鼠标点击; mouseenter、mouseover 鼠标经过;mouseleave 、mouseout鼠标离开

焦点事件 : focus 获得焦点 blur 失去焦点

键盘事件 Keydown 键盘按下触发 Keyup 键盘抬起触发

**文本事件 ** input 用户输入事件

小米单选复选框：

 <script>
        /* 1.鼠标点中全选按钮下边的列表都能选中 巧妙利用列表单选框的状态等于全选按钮的状态 
        2. 找被选中的列表个数 如果选中的列表数等于列表数组的长度 即全选 那么输出的结果为真
        3.随机给数组中列表添加鼠标点击事件 让点击的状态等于函数 令全选按钮点击状态等于函数值*/
        let checkAll=document.querySelector('#checkAll')/* 全选的单选框是一个id选择器 */;
        let ck=document.querySelectorAll('.ck');/* td的类名都是ck所以使用querySelectorAll 选中的是一个数组 */
        // console.log(ck);
       checkAll.addEventListener('click',function () {
        //   console.log( checkAll.checked);/* checkAll.checked是checkAll鼠标点击事件 */
        /* ck是一个数组 需要遍历才能拿到数组里面的值 */
        for (let index = 0; index < ck.length; index++) {
           ck[index].checked=checkAll.checked;/* 令ck数组里面的值等于全选按钮的状态 */
           console.log( ck[index].checked);
        }
       });
       /* 这个函数是为了判断选中的列表数目 */
       function isAllchecked() {
        let checkedNum=0;
        for (let index = 0;index< ck.length; index++) {
        if (ck[index].checked) {
           checkedNum++;
           console.log(checkedNum);/* 找被选中的列表个数 */
         }
         }
         if (checkedNum === ck.length) { /* 如果选中的商品数量等于选择商品的数组长度那么就返回真 */
       console.log("全选");
       return true;
      }else{
        console.log("不全选");
        return false;
      }
     }
       isAllchecked()
       for (let index = 0; index < ck.length; index++) {
         ck[index].addEventListener('click',function () {
         let checked=isAllchecked();
         checkAll.checked=checked;
        })
       }
    </script>

字符串

字符串有数组的特点，可以循环，长度length属性 let str="你们好呀"; str[0]=你 str[1]=们

输入几个字符显示几个数字 点击发布按钮 文本域内容添加到ul里面 清空文本域并且span值等于0

 <script>
    /* 1.文字内容属于文本域
    2.字符串和数组功能类似
    3.创建一个新的li
    4.鼠标点击发表按钮 li里面文本内容是文本域的值 给ul添加元素li 此时文本框字符串为0 */
    let area=document.querySelector('#area');
    let ul=document.querySelector('.contentList ul');
    let useCount=document.querySelector('.useCount');
    let send=document.querySelector('#send');
    let li=document.createElement('li');
    area.addEventListener('input',function () {
     useCount.innerHTML=`${area.value.length}`;/* span的文字等于文本域字符串的长度 */
     
    });
    send.addEventListener('click',function () {
     li.innerText=`${area.value}`;/* li里面文本内容等于文本域的内容 */
     ul.appendChild(li); /* 把li插入ul里面 */
     area.value='';/* 设置文本域文本为空字符串 就能清空文本域内容 */
     useCount.innerHTML=0/* 鼠标点击发布的时候useCount文本内容为0 */
    })
  </script>

环境对象：

变量this：代表函数运行时所处的环境

谁调用this， this就是谁 可以让代码简洁

高阶函数：

排他思想：

干掉所有人用：for循环+鼠标点击所有人的样式 复活自己：通过this或者下标找到自己或者对应的元素的样式

tab栏 点击鼠标 列表边框颜色改变 图片改变 切换列表这个列表变为原来状态

 <script>
  let liList=document.querySelectorAll('.tab-item');
  let mainList=document.querySelectorAll('.main');
  /*1. 给liList添加鼠标点击事件 
  2.先用for循环把active状态去掉*/
  for (let index = 0; index < liList.length; index++) {
    liList[index].addEventListener('click',function () {
      for (let j = 0; j < liList.length; j++) {
       liList[j].classList.remove('active')/* 点击鼠标所有的li上边的红色框都不见了 */
      }
      liList[index].classList.add('active')/* 再点击li只出现这一个的状态 */;
      for (let j = 0; j < mainList.length; j++) {
        mainList[j].classList.remove('active')/* 把所有的mainList都去掉 */
      }
      mainList[index].classList.add('active')/* 只出现点击的那个mainlist */
    })
  }
</script>

节点操作

DOM节点：Dom树当中每一个内容

元素节点：即标签 body div ；html是根节点

属性节点：所有的属性 href、class、id等

文本节点：标签里面的文字、空格、换行等 创建文本节点：creatTextNode

其他：比如注释节点就是注释

查找节点：

节点关系：父节点、 子节点、兄弟节点

查找父节点：返回最近一级的父节点，找不到返回值null

 dom元素.parentNode.style.display='none';

案例：点击子元素父元素隐藏

 <script>
        /* 点击子元素父元素隐藏 */
   let erweima=document.querySelectorAll('.erweima');/* 获取子元素的数组遍历子元素 */
   for (let index = 0; index < erweima.length; index++) {
    erweima[index].addEventListener('click',function () {
       this.parentNode.style.display='none' ;/* 子元素的父元素添加样式 */
    })
}
    </script>

查找子节点：

dom父元素.children

children获取所有元素节点，返回值是一个伪数组 用childern需要给子元素遍历

childrenNodes：获取所有子节点、包括文本节点(空格、换行)、注释节点等（了解）

 <script>
    let ul=document.querySelectorAll('ul');
    let li=document.querySelectorAll('li')
    for (let index = 0; index < ul.length; index++) {
      ul[index].addEventListener('click',function () {/* children是一个伪数组也需要遍历 */
        for (let j = 0; j < li.length; j++) {/* 遍历里list */
            ul[index].children[j].style.display='none';}
      })
    }
    </script>

查找兄弟元素：

nextElementSibling：下一个兄弟节点

previousElementSibling：上一个兄弟节点

<script>
        let liList=document.querySelectorAll('li');
        for (let index = 0; index < liList.length; index++) {
           liList[index].addEventListener('click',function () {
               liList[index].previousElementSibling.style.backgroundColor='pink'/* 点击的li列表的上一个兄弟元素样式改变 */
               liList[index].nextElementSibling.style.backgroundColor='gold'/* 点击的li列表的下一个兄弟元素样式改变 */
           })
        }
    </script>

增加元素节点：

创建节点 创建一个标签

document.createElement('标签名');/* 创建标签节点 */
document.createTextNode('标签名')/* 创建文本节点 */

追加节点 appendChild 、append：

插入父元素的最后 父元素.appendChild（标签名）插入的位置是父元素的底层；

appendChild（只能插一个标签名）；append（可以同时插入很多标签）

如果该元素是已经存在在网页中的元素那么appendChild类似于移动或者剪切

该元素是新创建的元素之前没有的那么appendChild功能是插入

<script>
        let ul=document.querySelector('ul');
        let li=document.createElement('li');/* 追加一个li元素节点 */
        ul.appendChild(li);/* 将新建的li元素添加在ul里面 位置父元素的最后*/
        li.style.backgroundColor='pink';
        li.innerText='这是插入的li标签'
    </script>

学成在线ul里面内容用appendChild、append添加元素：

<script>
         let ul=document.querySelector('.list');/* 页面获取ul标签 */
       for (let index = 0; index < data.length; index++) {/* data遍历 */
        let li=document.createElement('li');/* 创建一个li标签 */
        let img=document.createElement('img');/* 创建一个img */
        img.src=data[index].src;/* img的src属性 = data数组中的src */
        let h4=document.createElement('h4');/* 创建一个h4标签 */
        h4.innerText=data[index].title;/* h4里面的文本内容是data[index]数组里面title */
        let info=document.createElement('div');/* 创建一个div标签 */
        info.classList.add('info');/* 给div标签加一个类名 */
        let span1=document.createElement('span')/* 创建一个span标签 */
        span1.innerText='高级';/* span里面内容是高级 */
        let text1=document.createTextNode(' • ');/* 创建一个文本节点里面加内容 */
        let span2=document.createElement('span');
        span2.innerText=data[index].num;/* span标签的内容是 data数组里面的num*/
        let text2=document.createTextNode(' 人在学习 ');
        info.append(span1,text1,span2,text2);/* append可以一次添加很多标签  div里面有四个元素*/
        li.append(img,h4,info);/* li里面有三个元素 */
        ul.appendChild(li);/* ul添加子元素li */
       }
   </script> 

插入元素 insertBefore：

insertBefore和appendChild作用差不多 insertBefore插入父元素的某个子元素前面

父元素.insertBefore（要插入的元素，插入哪个元素的上边）;
right.insertBefore(three,e);
父元素.insertBefore(要插入的元素,null)/* 如果父元素里面没有子元素 被插入的元素为null */

克隆节点：

元素.cloneNode(布尔值);/* 克隆一个已有元素的节点 */ 默认值为false
true的时候会连同后代一块克隆-深克隆
false的时候只克隆标签不克隆后代-浅克隆

 <script>
   let div=document.querySelector('div');
   let newdiv=div.cloneNode();/* 只克隆标签自己 */
   let newdiv2=div.cloneNode(true);/* 克隆标签以及后代 */
   document.body.appendChild(newdiv)
   document.body.appendChild(newdiv2)
    </script>

删除节点：

**父元素删除子元素：**父元素.removeChild(删除的子元素)；

**删除自己：**自己.remove（）；

点击按钮删除元素

 <script>
        let ul=document.querySelector('ul');
        let btn=document.querySelector('button');
        btn.addEventListener('click',function () {
            let li=document.querySelector('ul li:nth-child(1)');
            // ul.removeChild(li);/* 点击按钮删除ul里面的第一个子元素 */
            ul.remove()/* 点击按钮删除自己 */
        })
    </script>

window：使用全局的方法或者属性 都属于windows对象的属性

window是：js所提供的很大的全局变量 在他身上封装很多好用的代码 方法或属性eg： console.log(); document.write();

完整的代码写法是：window.console.log(123); window.document.write(123);

window比较特殊可以直接省略window使用他的属性和方法

我们定义的全局的方法 其实 也是 window的一个属性

this 比较多的地方 是在事件处理函数中 this 代表这触发事件的那一个元素

 function show() {
        // console.log('show');
        console.log(this);
      }
      show();
      // window.show();
// 环境对象 this开始  谁调用我 我就等于谁
      let obj={
        username:"悟空",
        sayHi:function(){
          console.log(this); // this = obj 
        }
      }
      obj.sayHi()   
/* 页面输出效果如下 */：

数组和伪数组：

都可以使用for循环

真正的数组有一个方法可以使用filter、map、some、every、 find、 values、reduce等

通过 document.querySelectorAll 获取的数组 就是伪数组 数组的一些方式伪数组用不了

删除字符串的头尾空白符（空格 制表符tab 换行符等其他空白符）用trim（）

let arr=[];
console.log(arr.filter);/* 真正的数组可以使用filter这个方法 */

时间对象：

实例化：

代码中发下new关键字时，一般这个创建的操作叫实例化

let date = newDate(' ') 创建时间对象，如果内容不填写则为当前的时间 实例化时间对象

时间对象方法 ：

方法	作用	说明
getFullYear()	获取当前的年	获取四位年份
getMonth()	获取当前的月	取值0-11 所以要加1
getDate()	获取月份中的每一天	不同月份取值不同
getDay()	获取星期	取值0-6 0是星期天
getHours()	获取小时	取值0-23
getMinutes()	获取分钟	取值0-59
getSeconds()	获取秒	取值0-59

 <script>
        let date=new Date();
        console.log(date.getFullYear());/* 获取当前的年 */
        console.log(date.getMonth());/* 获取当前的月 取值0-11 所以要加1 */
        console.log(date.getDate());/* 获取月份中的每一天 不同月份取值不同 */
        console.log(date.getDay());/* 获取星期 取值0-6 */
        console.log(date.getHours());/* 获取小时 取值0-23 */
        console.log(date.getMinutes());/* 获取分钟 取值0-59 */
        console.log(date.getSeconds());/* 获取秒 取值0-59 */
        setInterval(function () {/* 添加一个定时器 页面效果输出时分秒 */
        let date=new Date();
          console.log( `${ date.getHours()} : ${ date.getMinutes()} : ${ date.getSeconds()}` );
        },1000)
    </script>

时间戳： ms为单位

可以快速生成一个不会重复的数字*随机数

返回当前时间和定义的时间对象之间的ms数值

1.使用getTime()

2.隐式转换 只有日期对象可以使用+将整个对象转成时间戳

3.Date.now()获取从1970年1月1号0时0分0秒的时间差

 <script>
        let date=new Date();/* 必须要定义时间对象才能获取当前时间 */
        console.log(date.getTime());/* 第一种方式 */
        console.log(+new Date());/* 第二种方式隐式转换 */
        console.log(Date.now());/* 第三种方式获取当前时间 */
    </script>

const:

let和const都能声明变量 但是const声明的变量不能被修改**，修改后会**报错；

const报错的情况:

看它有没有重新写 "= "号或者自增自减

 <script>
      /* let声明的变量可以被修改 const声明的变量不能被修改 */
     const a = 123;
     a = 8;
     console.log(a); /* 报错 修改了const声明的变量 */
     const arr=[];
     arr.push('1');
     console.log(arr);/* 修改数组里面的内容不会报错 等于开辟了数组中的空间 */
     const arr1=[];
     arr=1;/* 相当于定义一个新的变量 */
     console.log(arr);/* 报错 */
     const obj={};
     obj.name='陈多多'/* 不会报错 */
     obj=1;/* 报错 */
     const index=10;
     index++/* 会报错 */
  </script>

重绘回流:

事件对象：

获取事件对象：事件触发一瞬间的信息（一般是鼠标信息）事件对象一般命名为event ；ev； e

<script>
        let btn=document.querySelector('.btn');
        btn.addEventListener('click',function (event) {
            console.log(event);/* event就是事件对象  存放事件触发一瞬间的信息 */
        })
    </script>

事件对象常见属性：

属性	属性的解释
event.type	事件触发类型
event.clientX,event.clientY	鼠标的位置相对于视口（浏览器）左上角的位置
event.offsetX,event.offsetY	鼠标相对于当前DOM元素左上角的位置
event.key	获取当下按下键盘的值

event.preventDefault():阻止浏览器的默认行为

 event.preventDefault();/* 阻止浏览器的默认行为 */

鼠标移动图片跟着光标一起移动

  box.addEventListener('mouseover',function (event) {/* 大盒子添加鼠标移动事件 */
         const left=event.offsetX;/* left=鼠标相对于大盒子左上角的x轴距离 */
         const top=event.offsetY;/* top=鼠标相对于大盒子左上角的y轴距离 */
         img.style.left=left+'px';/* 一定要加px不然不生效 */
         img.style.top=top+'px';
       })

键盘按下可以发布

area.addEventListener('keydown',function (event) {/* 文本域添加键盘事件 */
            if (event.key==='Enter') {/* 当事件属性值为Enter */
               btn.click();/* 按钮点击事件 */
               event.preventDefault();/* 阻止浏览器默认行为 */
            }  
       })

事件流

给多个父子结构的标签绑定点击事件 先点击子元素 就会产生事件流动

**捕获阶段--》**父节点到子节点

**冒泡阶段--》**子节点到父节点 默认为冒泡阶段

可以通过 addEventListener('click',function () {},true)修改事件流动方向 默认值为false

   /* 1.默认为冒泡事件 从孙子——>父亲——>爷爷
     2. 可以通过 addEventListener('click',function () {},true)修改事件流动方向 默认为false*/
        a.addEventListener('click',function () {
            console.log('a');
        },true)/* 捕获 */
        b.addEventListener('click',function () {
            console.log('b');
        },false)/*冒泡 */
        c.addEventListener('click',function () {
            console.log('c');
        })/* 冒泡 */
        // 最终输出结果a c b 
    </script>

阻止冒泡：event.stopPropagation()

可以阻断事件流动传播 不光在冒泡阶段有效 捕获阶段也有效

阻止默认事件：event.preventDefault()

a标签默认行为链接点击跳转

   <a href="https://home.firefoxchina.cn/">a标签默认行为</a>
   a.addEventListener('click',function (event) {
        event.preventDefault();
        console.log('阻止点击');
    });

表单域中按钮默认点击后自动刷新：

input按钮类型不会自动刷新

 <form >
        <button class="btn1" type="button">button按钮在form表单中点击就刷新</button>
  </form>
    form.addEventListener('submit',function (event) {/* form表单提交事件 */
        event.preventDefault();
        console.log('按钮不刷新');
   });

鼠标右键阻止默认菜单生成

<script>
      const ul = document.querySelector("ul");
      document.body.addEventListener("contextmenu", function (event) {
        event.preventDefault(); /* 阻止鼠标右键默认的菜单 需要看看body的高 */
        ul.style.display='block';/* 让ul最开始隐藏 */
        const left=event.clientX;
        const top=event.clientY;
       ul.style.left=left+'px';/* ul的位置跟随鼠标移动 */
       ul.style.top=top+'px';
      });
      document.body.addEventListener('click',function (event) {
        ul.style.display='none';/* 鼠标点击后ul隐藏 */
      })
    </script>

事件委托：

利用事件流（捕获、冒泡）的特征解决一些开发需求，原理默认是事件冒泡

把事件给父级添加事件绑定（委托）：利用冒泡特点 子元素可以触发

事件对象.target 可以找到当前点击的标签（最底层的标签）即获得

点击哪个子元素子元素变颜色并且点击li标签li标签变其他颜色

 <script>
    const ul=document.querySelector('ul');
    ul.addEventListener('click',function (event) {
        event.target.style.backgroundColor='pink';/* 点击谁谁的背景色变粉色 点击的是最内层元素 */
        console.log(event.target.nodeName);/* 选中元素的标签名大写 */
        if (event.target.nodeName==='LI') {
            event.target.style.backgroundColor='blue';  /* 可以实现点击li li标签变蓝色  点击其他标签颜色不会改变*/ 
        }
    })
</script>

找到标签中的数据并且删除这组数据 内存中存放数据块的索引data-index=变量名 event.target.dataset.变量名

 <a data-index=${index} href="javascript:" class="del">删除</a>
 <script>
if (event.target.nodeName==='A') {
             const index=event.target.dataset.index;
            arr.splice(index,1);
         }
 <script>

滚动事件：scroll

小火箭添加过渡效果移至顶部：

 <script>
      const actGotop = document.querySelector(".actGotop");
      window.addEventListener("scroll", function () {
        const scrollTop = document.documentElement.scrollTop;
        if (scrollTop > 1000) {
          actGotop.style.display = "block";
        } else {
          actGotop.style.display = "none";
        }
      });
        actGotop.addEventListener("click", function () {/* 点击火箭慢慢移动到顶部 */
         /* document.documentElement.scrollTop = 0; */
        // actGotop.style.transition='3s'
          let timeId = setInterval(function () {/* 设置定时器  每次移动距离减20*/
          document.documentElement.scrollTop-=20;
          console.log('设置定时器',document.documentElement.scrollTop);
          if (document.documentElement.scrollTop===0) {/* 当移动到顶部的时候 要记得清除定时器 在设置定时器里面当滚动到顶部的时候清除定时器 */
            clearInterval(timeId)
        }
    }, 100);
});     
    </script>`

加载事件