老己的JavaScript API笔记3

FinchLin
63 阅读6分钟

JavaScript API知识笔记 第三天

先前遗留案例：

案例

全选文本框案例1

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消

①：全选复选框点击，可以得到当前按钮的 checked

②：把下面所有的小复选框状态checked，改为和全选复选框一致

const checkAll = document.querySelector('#checkAll')
    const ck = document.querySelectorAll('.ck')
    checkAll.addEventListener('click', function () {
      for (let i = 0; i < ck.length; i++) {
        ck[i].checked = this.checked
      }
    })

案例

全选文本框案例2

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化

①：遍历下面的所有的checkbox,添加点击事件

②：检查小复选框选中的个数，是不是等于 小复选框总的个数，

③： 把结果给 全选按钮

④： 利用css 复选框选择器 input:checked

const checkAll = document.querySelector('#checkAll')
    const ck = document.querySelectorAll('.ck')
    checkAll.addEventListener('click', function () {
      for (let i = 0; i < ck.length; i++) {
        ck[i].checked = this.checked
      }
    })
    for (let i = 0; i < ck.length; i++) {
      ck[i].addEventListener('click', function () {
        checkAll.checked = document.querySelectorAll('.ck:checked').length === ck.length
      })
    }

一、事件流

1.事件流本质和其两个阶段

事件流本质：

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

两个阶段：

捕获阶段、冒泡阶段

捕获是从父到子，即从大到小

冒泡是从子到父，即从小向上至大

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

2.事件捕获

本质：

从DOM的根元素开始去执行对应的事件

语法：

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

第三个参数传入true代表捕获阶段，但基本很少使用。反之亦然，默认false。

3.事件冒泡

本质：

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

可以理解为有多个盒子套在一起，但你点击最小盒子时，会依次触发外层的盒子

4.阻止冒泡

因为默认存在冒泡模式，所以导致事件容易影响到父级元素

语法：

事件对象(e).stopPropagation()

若此再以刚刚的例子来理解的话，如果将该语句放入小盒子事件时，当点击最小的盒子时，不再触发外部盒子的事件

语法：

e.preventDefault()

eg：

<body>
  <form action="http://www.baidu.com">
    <input type="submit" name="" id="">
  </form>
  <script>
    const form=document.querySelector('form')
    form.addEventListener('click',function(e){
      e.preventDefault()
      //阻止了表单的提交
    })
  </script>
</body>

5.解绑事件

两种：

on事件方式

语法：

对象.onclick=null

eg:

btn.onclick=function(){
      alert('~')
    }
    byn.onclick=null

addEventListener方式：

语法：

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

eg:

 const btn=document.querySelector('.btn')
    function fn(){
      alert('~')
    }
    btn.addEventListener('click',fn)
    btn.removeEventListener('click',fn)

补充

mouseover 和 mouseout 会有冒泡效果

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

二、事件委托

原理：

事件委托是利用是事件冒泡的特点

语法：

事件对象.target.tagName==='大写'

eg：

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

好处：

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

案例

tab栏切换改造

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

思路：

①：给a的父级 注册点击事件，采取事件委托方式

②： 如果点击的是A , 则进行排他思想，删除添加类

③： 注意判断的方式 利用 e.target.tagName

④： 因为没有索引号了，所以这里我们可以自定义属性，给5个链接添加序号

⑤： 下面大盒子获取索引号的方式 e.target.dataset.id 号， 然后进行排他思想

const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        document.querySelector('tab-nav .active').classList.remove('active')
        e.target.classList.add('active')
        const i = +e.target.dataset.id
        document.querySelector('.tab-content .active').classList.remove('active')
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
      }
    })

三、其他事件

1.页面加载事件

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

事件名：load

语法：

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

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

事件名：DOMContentLoaded

语法：

document.addEventListener('DOMContentLoaded',function(){})

2.元素滚动事件

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

事件名：scroll

语法：

监听整个页面滚动

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

可以给window或document添加scroll事件

获取位置

scrollLeft和scrollTop（属性）

  • 获取被卷去的大小

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

  • 这两个值是可读写的

相当于获取你在页面上滑和左滑的距离

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

eg：

window.addEventListener('scroll',function(){
      const n=document.documentElement.scrollTop
      console.log(n)
    })

document.documentElement返回的对象是html元素

案例

页面滚动显示隐藏侧边栏

需求：当页面滚动大于300像素的距离时候，就显示侧边栏，否则隐藏侧边栏

①：需要用到页面滚动事件

②：检测页面被卷去的头部，如果大于300，就让侧边栏显示

③：显示和隐藏配合css过渡，利用opacity加渐变效果

const elevayor=document.querySelector('.xtx-elevator')
    window.addEventListener('scroll',function(){
      const n=document.documentElement.scrollTop
      elevayor.style.opacity=n>=300?1:0
    })

滚动到指定的坐标

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

语法：

元素.scrollTo(x,y)

eg:

window.scrollTo(0, 1000)
//将页面滚从到y轴的1000px位置

案例

返回顶部

需求：点击返回按钮，页面会返回顶部

①：绑定点击事件

②：利用scrollTop 让页面返回顶部

const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
      window.scrollTo(0, 0)
    })

3.页面尺寸事件

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

resize

eg：

window.addEventListener('resize', function () {
      console.log('窗口大小改变了')
    })

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

clientWidth和clientHeight

image.png

四、元素尺寸与位置

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

offsetWidth和offsetHeight

获取元素距离自己定位父级元素的左、上距离

offsetLeft/offsetTop=内容+padding+border

offsetLeft和offsetTop 注意是只读属性。获取元素距离自己定位父级元素的左、上距离。如果都没有则以 文档左上角 为准。

image.png

案例

仿京东固定导航栏案例

需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出

①：用到页面滚动事件

②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出

③：主要移动的是秒杀模块的顶部位置

const sk = document.querySelector('.sk')
    const header = document.querySelector('.header')
    window.addEventListener('scroll', function () {
      const n = document.documentElement.scrollTop
      header.style.top = n >= sk.offsetTop ? '0px' : '-80px'
    })

element.getBoundingClientRect()

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

即，调用该语句，能得到：

  • x / left：元素左边缘到视口左侧的距离

  • y / top：元素上边缘到视口顶部的距离

  • right：元素右边缘到视口左侧的距离

  • bottom：元素下边缘到视口顶部的距离

  • width：元素的宽度（right - left）

  • height：元素的高度（bottom - top）

  • top/bottom/left/right 是相对视口的位置，滚动页面时这些值会变化（因为视口位置变了）。

总结

image.png

avatar
文章
阅读
粉丝