Web APIs Dom事件进阶

事件流

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

阻止冒泡

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

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

    

      

    
  
  

事件对象中的 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