WebAPIs 第三天

news2024/11/26 22:18:29

DOM 事件进阶

事件流
事件委托
其他事件
元素尺寸与位置

一.事件流

事件流与两个阶段说明
事件捕获
事件冒泡
阻止冒泡
解绑事件

1.1 事件流与两个阶段说明

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

② 事件流分为捕获阶段和冒泡阶段

1.2 事件捕获

从DOM根元素开始去执行对应的事件（从外到里）
代码： DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
说明：addEventListener第三个参数传入true代表是捕获阶段触发（很少使用），如果不屑，默认就是false,false代表冒泡阶段触发
如果用L0事件监听，只有冒泡阶段，没有捕获

1.3 事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是false,或者默认都是冒泡

1.4 阻止冒泡

① 问题：如果默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，如果想把事情就限制在当前元素内，就需要阻止事件冒泡

② 阻止冒泡需要拿到事件对象

③ 语法：对象.e.stopPropagation()

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

1.5 解绑事件

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

② addEventListener方式，必须使用 removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡])

const btn = document.querySelector('button')
function fn() {
   alert('点击了')
}
btn.addEventListener('click', fn)
// 匿名函数不能解绑
btn.removeEventListener('click', fn)

1.6 鼠标经过事件的区别

mouseover 和 mouseout 有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果（推荐）

1.7 两种注册事件的区别

① 传统on注册（L0）

同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段执行的

② 事件监听注册（L2）

语法：addEventListener(事件类型，事件处理函数，是否使用捕获机制)
后面注册的事件不会覆盖前面注册的事件（同一个事件）
可以通过第三个参数去确定在冒泡或捕获阶段执行
必须使用 removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡])
匿名函数无法被解绑

二.事件委托

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

② 优点

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

③ 事件委托：利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <p>无需变色<p>
    </ul>
    <script>
        // 给父元素添加事件,触发子元素
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            //  真正触发元素
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })
    </script>

三.其他事件

3.1 阻止冒泡

① 某些情况下组要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转

② 语法：e.preventDefault()

代码：

  <form action="http://www.baidu.com">
        <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>

3.2 页面加载事件

① 概念：加载外部资源，加载完毕时触发的事件

② 为什么要学：

有时候需要等页面资源全部处理完了做一些事情
老代码喜欢把script写到head中，这时候直接找dom元素找不到

③ 事件名：load

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

给window添加load事件

window.addEventListener('load', function () {
   const btn = document.querySelector('button')
   btn.addEventListener('click', function () {
       alert('hello')
   })
})

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

⑤ DOMContentLoaded

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，无序等到样式表和图像完全加载
事件：DOMContentLoaded
给document添加 DOMContentLoaded 事件

document.addEventListener('DOMContentLoaded', function () {
   const btn = document.querySelector('button')
   btn.addEventListener('click', function () {
   alert('hello')
})
})

3.3 页面滚动事件

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

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

③ 事件名：scroll

④ 监听整个页面滚动: 给window或document 添加scroll事件

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

// scrollLeft 和 scrollTop
① 获取被卷去的大小
② 获取元素往左，往上滚出去看不到的距离
③ 这两个值都是可读写的 
document.documentElement.scrollTop = 800
        const div = document.querySelector('div')
        window.addEventListener('scroll', function() {
            // 必须写到里面,得到的是一个数字型,不带单位
            const n = document.documentElement.scrollTop
            console.log(n)
            if (n >= 100) {
                div.style.display = 'block'
            } else {
                div.style.display = 'none'
            }
        })

3.4 页面尺寸事件

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

② resize

const div = document.querySelector('div')
        console.log(div.clientWidth)
        window.addEventListener('resize', function() {
            console.log('hahah')
        })

③ 检测屏幕宽度