6.2 JavaScript Apis

6.2 JavaScript Apis -事件流、事件委托

文章目录

6.2 JavaScript Apis -事件流、事件委托
一、事件流
- 1.1 事件捕获
- 1.2 事件冒泡
- 1.3 阻止冒泡
- 1.4 解绑事件
- 1.5 阻止默认行为
二、事件委托
- 2.1 介绍
- 2.2 tab栏切换改造
三、其他事件
- 3.1 页面加载事件
- - 3.1.1 load 事件
  - 3.1.2 DOMContentLoaded
- 3.2 页面滚动事件
- - 3.2.1 滚动显示侧边栏、
  - 3.2.2 快速回顶部
  - 3.2.3 scrollTo()
- 3.3 页面尺寸事件
四、元素尺寸与位置

一、事件流

事件流指的是事件完整执行过程中的流动路径

事件流分为两种，第一种是捕获，第二种是冒泡

捕获可以看做是从大了往小了，冒泡可以看做是从小的往大的

说明：假设页面里面有一个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

捕获阶段是从父到子，冒泡阶段是从子到父

实际工作都是使用事件冒泡为主

1.1 事件捕获

从DOM的根元素开始去执行对应的事件（从外到里）

事件捕获需要写对应的代码才能看到效果

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

addEventListener第三个参数传入true代表是捕获阶段触发，但是这种情况很少使用

若使用L0事件监听，则只有冒泡阶段，没有捕获

效果：当我们点击紫色的div框（son）的时候，会依次执行爷爷、爸爸、儿子，这个其实就是事件流动，事件的捕获。这些盒子绑定的事件会依次执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .father{
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    .son{
        width: 200px;
        height: 200px;
        background-color: purple;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<script>
  const fa = document.querySelector('.father')
  const son = document.querySelector('.son')
  //document是最大的DOM对象
  document.addEventListener('click', function() {
    alert('我是爷爷')
  },true)
  fa.addEventListener('click', function() {
    alert('我是爸爸')
  },true)
  son.addEventListener('click', function() {
    alert('我是儿子')
  },true)
</script>
</body>
</html>

1.2 事件冒泡

实际工作是以冒泡为主

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

默认情况下，冒泡一定会发生的，只不过之前发生的时候我们没有看到任何的效果

下面这种情况，就是事件冒泡

正好与事件捕获反着来，依次执行儿子、爸爸、爷爷

DOM.addEventListener(事件类型,事件处理函数)

DOM.addEventListener(事件类型,事件处理函数,false)

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

父级都会执行一次同名的事件类型操作

比如儿子执行的是click事件，那爸爸、爷爷也会执行click事件

L2事件监听第三个参数时false，或者默认都是冒泡

1.3 阻止冒泡

有时候冒泡并不好，我们要进行阻止冒泡。

问题：默认有冒泡模式的存在，所以容易导致事件影响到父级元素

需求：若想把事件限制在当前元素内，就需要阻止事件冒泡

前提：阻止事件冒泡需要拿到事件的对象

语法：

事件对象.stopPropagation()

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

示例：

son.addEventListener('click', function(e) {
  e.stopPropagation()
  alert('我是儿子')
})

1.4 解绑事件

L0 on事件方式，直接使用null覆盖就可以实现事件的解绑

语法

//绑定事件
btn.onclick=function(){
    alert('点击了')
}
//解绑事件 赋值空对象即可
btn.onclick=null

我们现在很少用这种事件绑定方式了

**L2 addEventListener事件解绑方式 **

//这个函数需要专门的拿出来
function fn(){
     alert('点击了')
}
//绑定事件
btn.addEventListener('click',)
//解绑事件
btn.removeEventListener('click',fn())

注意！匿名函数无法被解绑

1.5 阻止默认行为

我们在某些情况下，需要阻止默认行为的发生，比如阻止链接的跳转或者表单域跳转等

语法

事件对象.preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="http://www.itcast.cn">
  <input type="submit" value="免费注册">
</form>
<a href="http://www.baidu.com"></a>
<script>
  const form = document.querySelector('form')
  form.addEventListener('submit', function(e) {
    //阻止默认行为
    e.preventDefault()
  })
  const a = document.querySelector('a')
  a.addEventListener('click', function(e) {
    //阻止默认行为
    e.preventDefault()
  })
</script>
</body>
</html>

二、事件委托

2.1 介绍

事件冒泡有一个非常好的用途，就是事件委托，事件委托其实是一种技巧

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，提高程序性能

原理：事件委托其实是利用事件冒泡的特点

给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

如果同时给多个元素注册事件，我们之前使用的是for循环注册事件，那有没有一种技巧注册一次事件就能完成以上效果呢？

我们点击的li，但是li上没有真正的点击事件，此时会事件冒泡到父级元素ul上，ul上会有点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul>
  <li>第1个孩子</li>
  <li>第2个孩子</li>
  <li>第3个孩子</li>
  <li>第4个孩子</li>
  <li>第5个孩子</li>
  <p>我不需要变色</p>
</ul>
<script>
  //点击每个小li，当前li文字变为红色
  //使用事件委托的方式
  //1.获取父级元素
  const ul = document.querySelector('ul')
  ul.addEventListener('click', function(e) {
    //这里的this指的是ul，不是li，所以我们要使用事件对象获取到对应的第几个li
    //e.target其实就是我们点击的对应的元素对象
    if (e.target.tagName === 'LI') {
      e.target.style.color = 'red'
    }
  })
</script>
</body>
</html>

效果如下图所示：

2.2 tab栏切换改造

需求：优化程序，将tab切换案例改为事件委托写法

tab栏的事件委托，我们委托给ul即可

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>tab栏切换</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      .tab {
          width: 590px;
          height: 340px;
          margin: 20px;
          border: 1px solid #e4e4e4;
      }

      .tab-nav {
          width: 100%;
          height: 60px;
          line-height: 60px;
          display: flex;
          justify-content: space-between;
      }

      .tab-nav h3 {
          font-size: 24px;
          font-weight: normal;
          margin-left: 20px;
      }

      .tab-nav ul {
          list-style: none;
          display: flex;
          justify-content: flex-end;
      }

      .tab-nav ul li {
          margin: 0 20px;
          font-size: 14px;
      }

      .tab-nav ul li a {
          text-decoration: none;
          border-bottom: 2px solid transparent;
          color: #333;
      }

      .tab-nav ul li a.active {
          border-color: #e1251b;
          color: #e1251b;
      }

      .tab-content {
          padding: 0 16px;
      }

      .tab-content .item {
          display: none;
      }

      .tab-content .item.active {
          display: block;
      }
  </style>
</head>

<body>
<div class="tab">
  <div class="tab-nav">
    <h3>每日特价</h3>
    <ul>
      <!--自定义属性 "data-"开头的属性，获取的时候使用 元素对象.dataset.id获取即可 -->
      <li><a data-id="0" class="active" href="javascript:;">精选</a></li>
      <li><a data-id="1" href="javascript:;">美食</a></li>
      <li><a data-id="2" href="javascript:;">百货</a></li>
      <li><a data-id="3" href="javascript:;">个护</a></li>
      <li><a data-id="4" href="javascript:;">预告</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="item active"><img src="./images/tab00.png" alt=""/></div>
    <div class="item"><img src="./images/tab01.png" alt=""/></div>
    <div class="item"><img src="./images/tab02.png" alt=""/></div>
    <div class="item"><img src="./images/tab03.png" alt=""/></div>
    <div class="item"><img src="./images/tab04.png" alt=""/></div>
  </div>
</div>

<script>
  //采取事件委托的形式 tab栏切换
  //1.获取ul父元素 因为ul只有一个
  const ul = document.querySelector('.tab-nav ul')
  // 获取 5个 item
  const items = document.querySelectorAll('.tab-content .item')
  //2.给ul添加事件
  ul.addEventListener('click', function(e) {
    //我们只有点击了a标签后，才会进行排查
    //e.target.tagName 是点击对象的标签名
    if (e.target.tagName === 'A') {
      //首先先移除原来的active，当前元素添加active
      document.querySelector('.tab-nav .active').classList.remove('active')
      //当前的A标签添加active
      e.target.classList.add('active')

      //下面的大盒子模块
      //我们在data-id后面加引号了，取过来的是一个字符串，会导致${i + 1}出现错误，所以我们首先得把其改为字符串类型
      const i = +e.target.dataset.id
      console.log(i)
      //移除大盒子的active
      document.querySelector('.tab-content .active').classList.remove('active')
      //对应的大盒子添加active
      //document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
      items[i].classList.add('active')
    }
  })
</script>
</body>
</html>

三、其他事件

3.1 页面加载事件

3.1.1 load 事件

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

我们目前是把JavaScript的代码写在了body标签的最底部，但是其实也可以写在head标签中

事件名：load
监听页面所有资源加载完毕：

给window添加load事件（window代表着整个窗口）

最大的事window，其次是document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script>
    //给window添加load事件
    //等待页面所有资源加载完毕，就会执行回调函数
    window.addEventListener('load', function() {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function() {
        alert('你好')
      })
    })

  </script>
</head>
<body>
<button>点击</button>
</body>
</html>

注意！不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

等待某个图片加载完成后，就会执行回调函数

    img.addEventListener('load',function(){
      //等待图片加载完毕
    })

3.1.2 DOMContentLoaded

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

load是监听整个页面资源，是给window加的，一定不要混淆

监听页面DOM加载完毕：给document添加DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function() {
  //执行的操作
})

3.2 页面滚动事件

或者说是元素滚动事件

滚动条在滚动的时候，持续触发的事件

很多网页需要检测用户把页面滚动到某一区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面的滚动：

  window.addEventListener('scroll',function() {
    console.log('页面进行滚动了')
  })

给window或document添加scroll事件，我们一般是给window

我们也可以单独监听某个元素内部滚动，直接给某个元素加即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
      body {
          height: 3000px;
      }

      div {
          width: 200px;
          height: 200px;
          border: 1px solid #000;
          /*滚动条*/
          overflow: scroll;
      }
  </style>
</head>
<body>
<div>
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</div>
<script>
  // window.addEventListener('scroll', function() {
  //   console.log('页面进行滚动了')
  // })
  const div = document.querySelector('div')
  div.addEventListener('scroll',function(){
    console.log('文字进行滚动了')
  })
</script>
</body>
</html>

使用场景

滚动一段距离，让某些元素显示或者高亮等

可以使用scroll来检测滚动的距离，scrollLeft和scrollTop属性

使用其两个属性，能够获取被卷去的大小

获取元素内容往左往上滚出去看不到的距离

这两个值是可读写的

一定要是数值型的

竖着的长方体是内容，横着的代表是范围框，红色标出的长度就是scrollTop

<script>
  // window.addEventListener('scroll', function() {
  //   console.log('页面进行滚动了')
  // })
  const div = document.querySelector('div')
  div.addEventListener('scroll',function(){
    console.log('文字进行滚动了')
    //被卷去的头部div.scrollTop
    console.log(div.scrollTop)
    
  })
</script>

也能对整个页面进行滚动事件

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素就可以显示某个元素或者固定某一个元素

初始化的时候没有显示，当整个页面的顶部像素卷入超过100px后，div会展示出来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
      body {
          height: 3000px;
      }

      div {
          display: none;
          width: 200px;
          height: 200px;
          border: 1px solid #000;
          /*滚动条*/
          overflow: scroll;
      }
  </style>
</head>
<body>
<div>
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</div>
<script>
  const div = document.querySelector('div')
  window.addEventListener('scroll', function() {
    console.log('页面进行滚动了')
    //我想知道页面到底滚动了多少像素,也就是被卷去了多少 scrollTop
    //body的获取可以用document.body 但是html标签的获取不能用document.html获取
    //获取html要document.documentElement这样获取
    //得到的是数字型，不带单位
    console.log(document.documentElement.scrollTop)//这样的话我就能知道大页面滚动了多少
    const n = document.documentElement.scrollTop
    if (n >= 100) {
      div.style.display = 'block'
    }

  })
</script>
</body>
</html>

3.2.1 滚动显示侧边栏、

当页面滚动大于300像素，就显示电梯导航

红色框中的内容就是电梯导航

  //获取元素
  const elevator = document.querySelector('.xtx-elevator')
  //1.当页面滚动大于300像素，就显示电梯导航
  //2.给页面添加滚动事件
  window.addEventListener('scroll', function() {
    //被卷去的头部大于300
    //获取html要document.documentElement这样获取
    const n = document.documentElement.scrollTop
    if (n >= 300) {
      //显示电梯导航
      elevator.style.opacity = 1
    } else {
      elevator.style.opacity = 0
    }
  })

3.2.2 快速回顶部

添加一个点击事件，让scrollTop=0即可

  //点击返回页面顶部
  const backTop = document.querySelector('#backTop')
  backTop.addEventListener('click', function() {
    document.documentElement.scrollTop = 0
  })

3.2.3 scrollTo()

scrollTo()方法可把内容滚动到指定的坐标

//页面滚动到Y轴1000像素的位置
window.scrollTo(0,1000)

3.3 页面尺寸事件

会在窗口尺寸改变的时候触发事件resize

  //resize 浏览器窗口大小发生变化的时候触发的事件
  window.addEventListener('resize', function() {
    console.log("窗口大小发生了变化")
  })

检测屏幕宽度clientWidth、clientHeight属性

获取元素的可见部分宽高，不包含边框、margin、滚动条等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          display: inline-block; /*块的大小由内容来定*/
          width: 200px;
          height: 200px;
          background-color: pink;
          padding: 10px;
      }
  </style>
</head>
<body>
<div>

</div>
<script>
  //获取元素
  const div = document.querySelector('div')
  console.log(div.clientWidth)
  console.log(div.clientHeight)
  //resize 浏览器窗口大小发生变化的时候触发的事件
  window.addEventListener('resize', function() {
    console.log('窗口大小发生了变化')
  })
</script>
</body>
</html>

页面尺寸于位置-尺寸

获取位置 element.getBoundingClientRect()

方法返回元素的大小及相对于视口的位置

当我们的盒子顶部隐藏了一部分后，top的值就变成负的了

四、元素尺寸与位置

我想要得到我这个盒子再页面中是多大的，并且能够知道他的位置

前面的案例滚动多少距离使我们自己算的，但是我们想页面滚动到某个元素，就可以做某些事情

简单的说，我们想通过js的方式，得到元素在页面中的位置

这样我们做页面滚动到某个具体位置执行具体的操作了，省了我们计算距离这一步，方便了一点

获取宽高offsetWidth、offsetHeight

获取元素的自身的宽高、包含元素自身设置的宽高、padding、border

获取出来的是数值，方便计算

注意！获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

电梯导航栏就可以做下面的修改

这样就不用担心盒子上移和下移的问题

  //获取元素
  const elevator = document.querySelector('.xtx-elevator')
  const entry = document.querySelector('.xtx-entry')
  //1.当页面滚动大于300像素，就显示电梯导航
  //2.给页面添加滚动事件
  window.addEventListener('scroll', function() {
    //获取html要document.documentElement这样获取
    const n = document.documentElement.scrollTop
    elevator.style.opacity = n>= entry.offsetTop ? 1 :0
    //if (n >= 300) {
      //显示电梯导航
      //elevator.style.opacity = 1
    //} else {
      //elevator.style.opacity = 0
    //}
  })

获取位置

获取元素距离自己定位父级元素的左、上距离，会受父级元素的影响

检测盒子的位置，最近一级带有定位的父级/祖先级元素

offsetLeft和offsetTop等注意是只读属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color: pink;
          margin: 100px;
      }
  </style>
</head>
<body><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color: pink;
          margin: 100px;
      }

      p {
          width: 100px;
          height: 100px;
          background-color: purple;
          margin: 50px;
      }
  </style>
</head>
<body>
<div>
  <p></p>
</div>

<script>
  const div = document.querySelector('div')
  console.log(div.offsetLeft) //108 因为body还有一个8像素的外边距 100+8=108
  const p = document.querySelector('p')
  console.log(p.offsetLeft) //158 8+100+50 ，不是说会受父级元素影响么，为什么不是50？ 因为父级元素div没有定位住
</script>
</body>
</html>

<script>
const div = document.querySelector('div')
console.log(div.offsetLeft) //108 因为body还有一个8像素的外边距 100+8=108
</script>
</body>
</html>

给div定位住

      div {
          position:relative;
          width: 200px;
          height: 200px;
          background-color: pink;
          margin: 100px;
      }