2023年web前端开发之JavaScript webAPI(三)

最新推荐文章于 2024-11-10 15:10:09 发布

全能技术师

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量147

点赞数

分类专栏： web前端开发学习文章标签： javascript html 前端 Powered by 金山文档

努力的小周同学

本文链接：https://blog.csdn.net/qq_60870118/article/details/129638949

版权

web前端开发学习专栏收录该内容

19 篇文章 4 订阅

订阅专栏

本文介绍了事件流的概念，包括捕获和冒泡阶段，以及如何阻止事件冒泡。同时，详细讲解了全选按钮的实现，通过JavaScript控制复选框的选中状态，并探讨了事件委托在大量元素事件处理中的优势。最后，提到了页面加载、滚动和尺寸变化等其他事件，以及综合案例——bilibili小滑块移动效果和页面模块导航的实现。

摘要由CSDN通过智能技术生成

全选按钮案例

代码如下:

<!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>Document</title>
</head>
<style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
<body>
    <table>
        <tr>
          <th class="allCheck">
            <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
          </th>
          <th>商品</th>
          <th>商家</th>
          <th>价格</th>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米手机</td>
          <td>小米</td>
          <td>￥1999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米净水器</td>
          <td>小米</td>
          <td>￥4999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米电视</td>
          <td>小米</td>
          <td>￥5999</td>
        </tr>
      </table>
      <script>
        //1.获取一个大的复选框
        const checkAll = document.querySelector('#checkAll')
        //2. 获取所有小的复选框
        const  ck = document.querySelectorAll('.ck')
    // 3. 点击大复选框  注册事件
   
    checkAll.addEventListener('click',function(){
    // 得到当前大复选框的选中状态
      // console.log(checkAll.checked)  // 得到 是 true 或者是 false
      // 4. 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
        for(let i=0;i<ck.length;i++){
            ck[i].checked = this.checked
        }

    })
      // 5. 小复选框控制大复选框
 for(let i = 0;i<ck.length;i++){
    
      // 5.1 给所有的小复选框添加点击事件
        ck[i].addEventListener('click',function(){
            
        // 判断选中的小复选框个数 是不是等于  总的小复选框个数
        // 一定要写到点击里面，因为每次要获得最新的个数
        // console.log(document.querySelectorAll('.ck:checked').length)
        // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
            checkAll.checked = document.querySelector('.ck:checked').length===ck.length

        })
 }


    
    
      </script>
</body>
</html>

一.学习内容

进一步学习事件进阶，实现更多交互的网页特效，结合事件流的特征优化事件执行的效率

掌握阻止事件冒泡的方法

理解事件委托的实现原理

事件流

事件委托

其他事件

元素尺寸与位置

综合案例

二. 事件流

概念:

事件流是对事件执行过程的描述了解事件的执行过程有助于加深对事件的理解,提升开发实践中对事件运用的灵活度

如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。

简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。

捕获和冒泡

了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：

<body>
  <h3>事件流</h3>
  <p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
  <div class="outer">
    <div class="inner">
      <div class="child"></div>
    </div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer');
    const inner = document.querySelector('.inner');
    const child = document.querySelector('.child');
        
    // html 元素添加事件
    document.documentElement.addEventListener('click', function () {
      console.log('html...')
    })
        
    // body 元素添加事件
    document.body.addEventListener('click', function () {
      console.log('body...')
    })

    // 外层的盒子添加事件
    outer.addEventListener('click', function () {
      console.log('outer...')
    })
    
    // 中间的盒子添加事件
    outer.addEventListener('click', function () {
      console.log('inner...')
    })
    
    // 内层的盒子添加事件
    outer.addEventListener('click', function () {
      console.log('child...')
    })
  </script>
</body>

执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？

结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。

再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。

如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。

如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。

<body>
  <h3>事件流</h3>
  <p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
  <div class="outer">
    <div class="inner"></div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer')
    const inner = document.querySelector('.inner')

    // 外层的盒子
    outer.addEventListener('click', function () {
      console.log('outer...')
    }, true) // true 表示在捕获阶段执行事件
    
    // 中间的盒子
    outer.addEventListener('click', function () {
      console.log('inner...')
    }, true)
  </script>
</body>

结论：

addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发

addEventListener 第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false

事件流只会在父子元素具有相同事件类型时才会产生影响

绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）

3.阻止冒泡 ev.stopPropagation()

阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。

<body>
  <h3>阻止冒泡</h3>
  <p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
  <div class="outer">
    <div class="inner">
      <div class="child"></div>
    </div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer')
    const inner = document.querySelector('.inner')
    const child = document.querySelector('.child')

    // 外层的盒子
    outer.addEventListener('click', function () {
      console.log('outer...')
    })

    // 中间的盒子
    inner.addEventListener('click', function (ev) {
      console.log('inner...')

      // 阻止事件冒泡
      ev.stopPropagation()
    })

    // 内层的盒子
    child.addEventListener('click', function (ev) {
      console.log('child...')

      // 借助事件对象，阻止事件向上冒泡
      ev.stopPropagation()
    })
  </script>
</body>

结论: ev.stopPropagation() 方法专门阻止事件冒泡

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

<!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>Document</title>
  <style>
    .dad {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .baby {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="dad">
    <div class="baby"></div>
  </div>
  <script>
    const dad = document.querySelector('.dad')
    const baby = document.querySelector('.baby')
    dad.addEventListener('mouseenter', function () {
      console.log('鼠标经过')
    })
    dad.addEventListener('mouseleave', function () {
      console.log('鼠标离开')
    })
  </script>
</body>

</html>

解绑事件

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

语法如下:

<!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>Document</title>
</head>

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.onclick = function () {
      alert('点击了')
      // L0 事件移除解绑
      btn.onclick = null
    }

  </script>
</body>

</html>

addEventLiistener方式,必须使用

removeEventListener( 事件类型,事件处理函数,[获取捕获或者冒泡阶段])

添加代码如下

//定义一个函数
function fn (){
     alert('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)

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

两种注册事件的区别

l 传统on注册（L0）

Ø 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

Ø 直接使用null覆盖偶就可以实现事件的解绑

Ø 都是冒泡阶段执行的

l 事件监听注册（L2）

Ø 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

Ø 后面注册的事件不会覆盖前面注册的事件(同一个事件)

Ø 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

Ø 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

Ø 匿名函数无法被解绑

案例: 理解事件流,一看就懂

<!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>Document</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')
    // 山东  济南  蓝翔   目标（pink老师）  捕获阶段
    //  蓝翔  济南   山东   冒泡阶段
    document.addEventListener('click', function () {
      alert('我是爷爷')
    }, true)
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    }, true)
    son.addEventListener('click', function () {
      alert('我是儿子')
    }, true)

  </script>
</body>

</html>

三. 事件委托

事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。

大量的事件监听是比较耗费性能的，如下代码所示

<script>
  // 假设页面中有 10000 个 button 元素
  const buttons = document.querySelectorAll('table button');

  for(let i = 0; i <= buttons.length; i++) {
    // 为 10000 个 button 元素添加了事件
    buttons.addEventListener('click', function () {
      // 省略具体执行逻辑...
    })
  }
</script>

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

优点: 减少注册次数, 可以提高程序性能

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

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

实现: 事件对象. target.tagName 可以获得真正触发事件的元素ul. addEventListener( ' click' ,function() { } )执行父级点击事件

const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
        //console.dir(e.target)
        if(e.target.tagName === 'LI'){
            this.style.color= 'pink'
            }

} )

事件委托案例:

点击相应的关键词,会显示相应的图片

<!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>
        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
        <li><a href="javascript:;" data-id="1">美食</a></li>
        <li><a href="javascript:;" data-id="2">百货</a></li>
        <li><a href="javascript:;" data-id="3">个护</a></li>
        <li><a href="javascript:;" data-id="4">预告</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.addEventListener('click', function (e) {
      // console.log(e.target)  // e.target是我们点击的对象
      // 我们只有点击了 a 才会 进行 添加类和删除类操作 
      // console.log(e.target.tagName)  // e.target.tagName 点击那个对象的 标签名
      if (e.target.tagName === 'A') {
        // console.log('我选的是a')
        // 排他思想 ，先移除原来的active  
        document.querySelector('.tab-nav .active').classList.remove('active')
        //当前元素添加 active  是 e.target
        // this 指向ul 不能用this 
        e.target.classList.add('active')

        // 下面大盒子模块
        // console.log(e.target.dataset.id)
        const i = +e.target.dataset.id
        // 排他思想 ，先移除原来的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>

四. 其他事件

页面加载事件

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

有些时候需要等页面资源全部处理完了做一些事情

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

l 为什么要学？

Ø 有些时候需要等页面资源全部处理完了做一些事情

Ø 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

l 事件名：load

l 监听页面所有资源加载完毕：

Ø 给 window 添加 load 事件

事件名：load

监听页面所有资源加载完毕：

window.addEventListener('load', function() {
    // xxxxx
})

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

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

全加载

l 事件名：DOMContentLoaded

l 监听页面DOM加载完毕：

Ø 给 document 添加 DOMContentLoaded 事件

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

页面滚动事件

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

l 为什么要学？

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

l 事件名：scroll

l 监听整个页面滚动：

Ø 给 window 或 document 添加 scroll 事件

l 监听某个元素的内部滚动直接给某个元素加即可

window.addEventListener('scroll', function() {
    // xxxxx
})

页面滚动事件-获取位置

l scrollLeft和scrollTop （属性）

Ø 获取被卷去的大小

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

Ø 这两个值是可读写的

l 尽量在scroll事件里面获取被卷去的距离

<!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>Document</title>
  <style>
    body {
      height: 3000px;
    }
  </style>
</head>

<body>
  <script>
    document.documentElement.scrollTop = 800
    window.addEventListener('scroll', function () {
      // 必须写到里面
      const n = document.documentElement.scrollTop
      // 得到是什么数据   数字型 不带单位
      // console.log(n)
    })
  </script>
</body>

</html>

页面滚动事件-滚动到指定的坐标

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

l 语法：

元素.scrollTo(x, y)

l 例如：

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

页面尺寸事件

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

window.addEventListener('resize', function() {
    // xxxxx
})

元素尺寸与位置

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

offsetWidth和offsetHeight

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

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

五. 综合案例

实现bilibili 点击小滑块移动效果案例

点击不同的模块，页面可以自动跳转不同的位置

模块分析：

①：页面滚动到对应位置，导航显示，否则隐藏模块

②：点击导航对应小模块，页面会跳到对应大模块位置

③：页面滚动到对应位置，电梯导航对应模块自动发生变化

资源地址免费获取: 2023年web前端开发之JavaScriptwebAPI(三).rar-Javascript文档类资源-CSDN文库