博学谷学习记录 | 学习总结，用心分享 | 前端学习之Web APIs（三）

程序二次猿

于 2023-01-31 22:01:33 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/m0_47321226/article/details/128795316

版权

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
 例如：网页中的倒计时
 要实现这种需求，需要定时器函数
 定时器函数有两种，今天我先讲间歇函数

目标：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1. 开启定时器
 作用：每隔一段时间调用这个函数
 间隔时间单位是毫秒
举例说明
注意：
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

2. 关闭定时器
一般不会刚创建就停止，而是满足一定条件再停止
注意：
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

事件（二）

1 事件流

1.1 基本概念

事件流中的“流”非常形象，它把事件的执行比作了流动的水，其完整的执行过程就像蜿蜒但又丝滑的水流一般。

1.2 事件捕获

事件捕获是从DOM的根元素开始去执行对应的事件 (从外到里），其代码格式为

假设为 body 里的某个 div 元素添加了点击事件，那么在点击完 div 之后，这个点击并不会立即作用在 div 上，而是依次作用在 document对象、 html对象、 body对象，最后才是 div对象，之所以我们会对这种作用“无感”，是因为我们并未对 div对象以外的其他对象添加事件处理函数。

如果我们为从外到内的对象都添加上事件处理函数，

<div id="btn3">
    btn3
    <div id="btn2">
        btn2
        <div id="btn1">
            btn1
        </div>
    </div>
</div>
<script>
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');
    let btn3 = document.getElementById('btn3');
    btn1.addEventListener('click',function(){
        console.log(1)
    }, true)
    btn2.addEventListener('click',function(){
        console.log(2)
    }, true)
    btn3.addEventListener('click',function(){
        console.log(3)
    }, true)
</script> //转自https://zhuanlan.zhihu.com/p/114276880

其打印结果如下

事件的触发顺序与事件监听代码的书写顺序无关，而只与HTML的结构有关。

需要说明的是：

① addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
② 若传入false则代表冒泡阶段触发（默认值即false）
③ 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

1.3 事件冒泡

事件冒泡是当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。

举个例子，

  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click', function () {
      console.log('我是爷爷');
    })
    fa.addEventListener('click', function () {
      console.log('我是爸爸');
    })
    son.addEventListener('click', function () {
      console.log('我是儿子');
    })
  </script>

在点击类名为 son 的 div 后，会依次执行 .son、.father 和 document 里绑定的事件处理函数，其结果如下

事件的触发顺序与事件监听代码的书写顺序无关，而只与HTML的结构有关。

需要说明的是：

① 事件冒泡是默认存在的
② L2事件监听第三个参数是 false，或者默认都是冒泡

1.4 阻止事件冒泡

由于冒泡是默认存在的，容易导致事件影响到父级元素，因此若想把事件就限制在当前元素内，就需要阻止事件冒泡，但前提是必须要拿到事件对象。

其语法如下，

  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click', function () {
      console.log('我是爷爷');
    })
    fa.addEventListener('click', function () {
      console.log('我是爸爸');
    })
    son.addEventListener('click', function (e) {
      console.log('我是儿子');
      e.stopPropagation()
    })
  </script>

在类名为 son 的元素里添加阻止冒泡的函数，则不会触发 .father 和 document 元素的事件处理函数，

需要注意的是：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。

1.5 鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果

2 事件委托

如果某个元素下有许多子元素需要监听事件，那么给每个子元素都绑定监听事件会极大的影响页面的性能，因此我们可以利用事件委托来进行优化，而事件委托利用的原理就是冒泡，即给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

以前的写法：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    let li_list = document.querySelectorAll('li')
    for(let index = 0;index<li_list.length;index++){
        li_list[index].addEventListener('click', function(e){
            console.log(e.currentTarget.innerHTML)
        })
    }
</script>
</body>

现在的写法：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    let ul = document.querySelector('ul')

    ul.addEventListener('click',function(e){
      console.log(e.target.innerHTML);
    })
</script>
</body>

3 其他事件

3.1 页面加载事件

1.load事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

给 window 添加 load 事件，

2.DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

给 document 添加 DOMContentLoaded 事件，

3.2 元素滚动事件

1.scroll事件

滚动条在滚动的时候持续触发的事件，其语法为

scroll 事件经常与 scrollLeft、scrollTop （属性）一起使用，这两个属性分别代表着元素内容往左、往上滚出后看不到的距离（距离值为数字类型），且是可读可写的，

<body>
  <div>
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
  </div>
  <script>
    const div = document.querySelector('div')
    // 页面滚动事件
    window.addEventListener('scroll', function () {
      // 我想知道页面到底滚动了多少像素， 被卷去了多少  scrollTop
      // 获取html元素写法  
      console.log(document.documentElement.scrollTop)
    })
    div.addEventListener('scroll', function () {
      // console.log(111)
      // scrollTop 被卷去的头部
      console.log(div.scrollTop)
    })
  </script>
</body>

当我在浏览器窗口里使用滚轮或者拖动滚动条时，会触发 window对象上绑定的 scroll 事件，该事件的处理函数是检测 html 标签内的内容向上滚动的距离，

当我在 div元素里使用滚轮或者拖动滚动条时，会触发 div对象上绑定的 scroll 事件，该事件的处理函数是检测 div 标签内的内容向上滚动的距离。

2.scrollTo方法

scrollTo() 方法可把内容滚动到指定的坐标，其语法是元素.scrollTo(x,y)。