前端学习 | 事件委托

小跟班李
128 阅读3分钟

事件委托

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

  • 优点：减少注册次数，可以提高程序性能
  • 原理：事件委托其实是利用事件冒泡的特点
    • 给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件 实现：事件对象.target.tagName可以获得真正触发事件的元素

组织默认行为

在某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
语法： e.preventDefault()

其他事件

页面加载事件

  • 加载外部资源（图片或css或js等）加载完毕时触发的事件
  • 为什么要学?
    • 有些时候需要等页面资源全部处理完了做一些事情
    • 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
  • 事件名：load
  • 监听页面所有资源加载完毕
    • 给Windows添加load事件
  • 不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件img.addEventListener('load'，function(){})
//页面加载事件
window.addEventListener('load',function(){
//执行的操作
})
  • 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
  • 事件名:DOMContentLoaded
  • 监听页面DOM加载完毕:
    • 给 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded',function(){})

页面滚动事件

  • 滚动条在滚动的时候持续触发的事件
  • 为什么要学?
    • 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
  • 事件名: scroll
  • 监听整个页面滚动：
window.addEventListener('scroll',function(){})

监听某个元素内部，直接给那个元素加滚动

页面滚动事件-获取位置

  • scrollLeft和scrollTop（属性）
    • 获取被卷去的大小
    • 获取元素内容往左、往上滚出去看不到的距离
    • 这两个值是可读写的

页面尺寸事件

  • 会在窗口尺寸改变的时候触发事件：
    • resize
      window.addEventListener('resize',function(){})
  • 检测屏幕宽度：
window.addEventListener('resize',function(){
       let w = document.documentElement.clientWidth
       console.log(w)
   })

获取元素宽高

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

元素尺寸于位置

  • 使用场景:
    • 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。
    • 简单说，就是通过js的方式，得到元素在页面中的位置
    • 这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

尺寸

  • 获取宽高：

    • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
    • offsetwidth和offsetHeight
    • 获取出来的是数值,方便计算
    • 注意:获取的是可视宽高，如果盒子是隐藏的,获取的结果是0

  • 获取位置:

    • 获取元素距离自己定位父级元素的左、上距离
    • offsetLeft和offsetTop 注意是只读属性
avatar
文章
阅读
粉丝