dom事件进阶

最新推荐文章于 2022-12-15 16:19:18 发布

网站装修工

最新推荐文章于 2022-12-15 16:19:18 发布

阅读量163

点赞数

分类专栏： webapi 文章标签：大数据

本文链接：https://blog.csdn.net/liubibaoo/article/details/125588354

版权

webapi 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.事件捕获

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

语法:

三个参数传入 true 代表是捕获阶段触发

若传入false代表冒泡阶段触发，默认就是false

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

2.事件冒泡

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

事件冒泡是默认存在的

3.阻止冒泡

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

语法:

3.1 阻止默认事件的发生

比如阻止链接的跳转，表单域跳转

语法:

<body>
    <a href="https://www.mi.com/?g_utm=Thirdparty.3601.L1.3.ProductUnion">小米</a>
    <script>
        document.querySelector('a').addEventListener('click', function (e) {
            alert('禁止')
            // 禁止默认  事件对象.preventDefault()
            e.preventDefault()
        })
    </script>
</body>

4.解绑事件

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

直接设置为null

语法:

L2级别 : addEventListener方式，必须使用：

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

匿名函数无法被解绑

<body>
    <button class="a1">提交</button>
    <button class="a2">解绑</button>
    <script>
        const a1 = document.querySelector('.a1')
        const a2 = document.querySelector('.a2')


        function fn() {
            console.log('提交');
        }
        
        // a1添加点击事件
        a1.addEventListener( 'click' , fn)


        a2.addEventListener( 'click',function() {
            // 点击a2按钮解绑a1的事件
            a1.removeEventListener('click' ,fn)
        })
    </script>
</body>

4.1鼠标经过事件的两种区别

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

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

5.事件委托

给父元素注册事件 ,里面的子元素也能有事件效果

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

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

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

事件对象.target 可以获得真正触发事件的元素对象事件源

事件对象.target. tagName 可以获得真正触发事件的元素

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <p></p>
        <h1></h1>
    </ul>
    <script>
        // 事件委托的 原理  是利用 事件冒泡的机制,将事件注册 委托给父元素
        // 给父元素注册事件
        const ul = document.querySelector('ul')
        ul.addEventListener('click' , function (e) {
            /* console.log(1); */

            // 只想给ul 里的li添加事件
            // e.target 指的事件触发的元素  即事件源
            // console.dir(e.target.tagName);  真正触发事件的元素
            if(e.target.tagName === 'LI') {
                /* console.log(1); */
            }
            console.log(e.target.tagName)
            console.log(e.target)

        })
    </script>
</body>

6.页面加载事件

6.1 给windows添加 load 事件

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

6.2 给页面dom添加 load 事件

总结:

load 事件: 监听整个页面资源给 window 加

DOMContentLoaded : 给 document 加无需等待样式表、图像等完全加载

7.元素滚动事件 scroll

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

8.页面滚动获取位置 scrollLeft和scrollTop

获取被卷去的大小都是可以读写的

<body>
  <script>
    // 1. 需要给 window 对象注册 scroll事件
    // 2. 需要 获取 页面 向上滚动的距离  页面指的是 html 标签对象  scrollTop   document.documentElement 表示获取 html标签
    // console.log(document.documentElement);
    window.addEventListener('scroll', function () {
      console.log(document.documentElement.scrollTop);
    })
  </script>
</body>

8.1 页面滚动滚动到指定的坐标

语法 : 元素.scrollTo(x, y)

9.页面尺寸事件 resize

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

10. 页面尺寸事件-尺寸 clientWidth和clientHeight

client 不算边框外边距只有内容和内边距的大小

<body>
    <div class="box"></div>
    <script>
        // 获取盒子
        const box = document.querySelector('.box')
        // 获取盒子的高宽
        // client 不算边框外边距   只有内容和内边距的大小
        console.log(box.clientWidth , box.clientHeight);
    </script>
</body>

11. 页面尺寸事件-获取元素宽高 offsetWidth和offsetHeight

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

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

注意是只读属性

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        //获取父盒子距离页面的距离
        console.log(document.querySelector('.box').offsetLeft , document.querySelector('.box').offsetTop);
        // 获取子盒子 ,若子盒子的父元素有定位 则距离是到父盒子的距离,若父盒子没有定位,则子盒子是到页面的距离
        console.log(document.querySelector('.son').offsetLeft , document.querySelector('.son').offsetTop);
    </script>
</body>

12. 元素尺寸于位置-尺寸 offsetLeft和offsetTop

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

注意是只读属性

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        //获取父盒子距离页面的距离
        console.log(document.querySelector('.box').offsetLeft , document.querySelector('.box').offsetTop);
        // 获取子盒子 ,若子盒子的父元素有定位 则距离是到父盒子的距离,若父盒子没有定位,则子盒子是到页面的距离
        console.log(document.querySelector('.son').offsetLeft , document.querySelector('.son').offsetTop);
    </script>
</body>

13. 元素尺寸于位置-尺寸 element.getBoundingClientRect()

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

总结 :

内容

offsetWidt

border

bord

borde

网站装修工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom事件进阶

阻止事件冒泡需要拿到事件对象语法: L2级别 : addEventListener方式，必须使用：给父元素注册事件 ,里面的子元素也能有事件效果6.页面加载事件6.1 给windows添加 load 事件不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件总结:load 事件: 监听整个页面资源给 window 加监听真个页面滚动给 window
复制链接

扫一扫