事件

事件监听

什么是事件监听 ?

就是让程序检测是否有事件产生，一旦有事件触发，立即调用一个函数做出响应

事件的三要素是什么？

事件源 (谁被触发了)
事件类型（用什么方式触发）
事件处理程序（要做什么事情）

事件类型

box.addEventListener('click',function(){
    
})

事件对象

什么是事件对象？

也是一个对象，这个对象里面有事件触发时的相关信息

环境对象

环境对象：指函数内部特殊的变量this ，它代表当前函数运行时所处的环境

粗略规则：谁调用，this就是谁

回调函数

函数A 作为参数传递给函数B时，我们称函数A为回调函数

function fn (){
    console.log('我是回调函数')
}
setInterval(fn, 1000)

事件流

事件流是指事件完整执行过程中的流动路径

事件捕获

从DOM的根元素开始去执行对应的事件（从外到里）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

第三个参数传true代表捕获阶段触发（很少使用）

传入false代表冒泡阶段触发，默认就是false

若使用L0事件监听，只有冒泡阶段，没有捕获

事件冒泡

当一个元素触发事件后，会依次向上调用同名事件(从里到外)

阻止冒泡

事件对象.stopPropagation() //阻止流动传播 (冒泡和捕获都可以)

事件对象.preventDefault() //阻止元素默认行为

解绑事件

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

事件委托

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

优点：减少注册次数，可以提高程序性能

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

给父元素注册事件，当我们触发子元素的时候，

会冒泡到父元素身上，从而触发父元素的事件

页面加载事件

window.addEventListener('load',function(){
    //执行的操作
})//等整个界面加载完了再执行

document.addEventListener('DOMContentLoaded', function(){
    //执行的操作
})//等整个dom树加载完了再执行,无需等待样式表，图像等完全加载

页面滚动事件 *

window.addEventListener('scroll',function(){
    console.log(document.documentElement.scrollTop)
    //获取整个页面滚动了多少像素 documentElement=HTMl
    window.scrollTo(x,y)
})

获取位置可读写

页面尺寸事件

获取元素的宽高

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {
    // xxxxx
})

元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

得到的位置以带有定位的父级为准，如果没有按文档左上角

offsetWidth,offsetHeight,offsetTop （只读属性)

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

element.getBoundingClientRect()
//方法返回元素的大小和其相对于视口的位置

html{
    scroll-behavior: smooth;
} //可以让滚动动作丝滑地滚动,默认是直接跳转

WGenji-Blog

JavaScript-DOM(2)

事件