WebAPIs(事件流 事件委托)

一.事件流:

事件流分为两种:捕获事件和冒泡事件

事件捕获: (从父到子)从DOM的根元素开始去执行对应的事件 (从外到里)布尔值是 true

// 事件捕获:事件从外往内 触发 事件在触发时 先触发 祖先身上的同名事件 在触发 爷爷身上的同名事件 最后才触发自己身上的事件
        // addEvenlisttener 第三个参数是 布尔值 如果为true 就表示 是捕获阶段 默认是false false 就代表冒泡阶段
        const div = document.querySelector('div')
        div.addEventListener('click', function () {
            console.log(1);
        }, true)

事件冒泡:(从子到父)当一个元素触发事件后会依次向上调用所有父级元素的同名事件(从里到外)

                布尔值默认是false

 // 事件冒泡 先触发自己身上的事件 然后触发祖先元素身上的同名事件
        // 事件源:on事件类型=事件触发函数
        // 事件源.addEventListener('事件类型,事件触发函数')
        // 默认是 事件冒泡
         
        const fa = document.querySelector('.father')
        const son = document.querySelector('.son')
        fa.addEventListener('click',function(){
            console.log(1);
        })

阻止冒泡:因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素若想把事件就限制在                 当前元素内，就需要阻止事件冒泡

 // 事件对象:事件发生时  有一个数据 保存到第一个对象 事件对象
        // 如何得到事件对象:事件处理函数里面的第一个形参 就是对象 形参名:evenmt ev e
e.stopPropagation()

阻止默认行为:阻止默认行为的发生，阻止 链接的跳转，表单域跳转

// 需要获取form标签
        // 需要给form标签注册 submit事件
        // 可以使用 事件对象.prevenDefault（）阻止 表单的默认行为
    e.preventDefault()

解绑事件:   (Lo)on事件方式,直接用null覆盖即可                

对象.onclick = function(){
       alert('你好')
       解绑事件
      on.click=null
 }

           (L2)使用removeaEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])

对象.romoveEventerListener('click',fn) //解绑事件
//匿名函数无法解绑

---

二.事件委托：

事件委托就是：给父元素注册事件，我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

事件委托的原理：事件委托利用了冒泡的特点

事件委托的优点：减少注册次数，提高程序的效率

事件对象.target.tagName 可以获取触发的元素

const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                console.log(11);
            }
        })

---

页面加载事件：

•  load事件：监听整个页面资源给window加
• DOMContentLoaded：  给document加   无需等待样式表，图像等完全加载

网页滚动事件：

 <script>
        // scroll滚动事件
        const box = document.querySelector('.box')
        box.addEventListener('scroll', function () {
            console.log('小盒子滚动了')
        })
        document.addEventListener('scroll', function () {
         console.log('滚动le')
        })
    </script>

scrollLeft 和scroolTop（属性）：获取被卷去的大小（值都是可读写的）

页面尺寸事件：

触发事件：resize

获取元素的可见宽高（不包含边框，margin，滚动条）

clientWidth和clientHeigth

元素尺寸位置-尺寸：

获取位置：offsetLeft和offsetTop  只是可读属性

检测得到盒子的位置，如果最近有定位的父级元素，参考父元素的位置，如果没有，则以浏览器窗口做产靠