DOM

文章目录

1. 1. DOMContentLoaded
2. 2. MutationObserver
3. 3. onpage
   1. 3.1. BFCache
4. 4. onmouse
5. 5. 委托代理事件
6. 6. 模拟事件

DOMContentLoaded

DOM树加载完毕后触发，而onload事件会等待js、css、img等资源

MutationObserver

dom监听事件：属性、child的增删改等

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

observer.observe(document.body, { childList: true })

onpage

• onpageshow
• onpagehide

BFCache

下单页跳转到地址选择页面，如果在地址选择完毕后使用history.back返回下单也，某些手机浏览器下，下单页是不会刷新的；此时可以使用onpageshow事件（往返缓存【参考资料】）来强行刷新，但在一些不支持此api的浏览器下，就没有办法了；最好的是将页面抽成组件调用，从而避免页面跳转；

window.onpageshow = (event) => {
  event.presisted && location.reload();
}

onmouse

• mouseenter、mouseleave 不冒泡
• mouseout：移入子代元素会触发，且冒泡
• mouseleave：移入子代元素不会触发，且不冒泡
  mouseover mousemove

委托代理事件

document.body.onclick = () => {
  event.target
}

模拟事件

fireEvent, dispatchEvent