浏览器的5种Observer你用过几种

网页开发中我们经常要处理用户交互我们会用addEventListener添加事件监听器来监听各种用户操作比如click mousedown mousemove input等这些都是由用户直接触发的事件.那么对于一些不是由用户直接触发的事件呢比如元素从不可见到可见元素大小的改变元素的属性和子节点的修改等这类事件如何监听呢浏览器提供了5种Observer来监听这些变动MutationObserverIntersectionObserverPerformanceObserverResizeObserverReportingObserver.一个元素从不可见到可见从可见到不可见这种变化如何监听呢用IntersectionObserver.IntersectionObserver可以监听一个元素和可视区域相交部分的比例然后在可视比例达到某个阈值的时候触发回调.我们准备两个元素.