Web APIs Dom事件进阶

最新推荐文章于 2024-05-20 22:14:20 发布

摇头娃娃丶

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量59

点赞数

文章标签：前端 javascript html5 css3

本文链接：https://blog.csdn.net/qq879222800/article/details/125091454

版权

事件流

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

阻止冒泡

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

<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 没有冒泡效果 (推荐)

事件委托

提高了性能，场景：多个事件利用冒泡，事件侦听加给父元素

触发的目标元素 e.target.tagName === '大写的'

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

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

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

元素滚动事件

滚动条在滚动的时候持续触发的事件 window.addEventListener('scroll', fn)

获取被卷去的大小 scrollTop, scrollLeft 尽量在scroll事件里面获取被卷去的距离

同时可以移动top和left element.scrollTo(0, 1000)

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

页面尺寸事件

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

元素尺寸与位置

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

offsetWidth和offsetHeight

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

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