网站导航
> 技术文档 > 学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置

学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置

网友: 技术文档 2025-07-26 19:57:51

一.环境对象

  • 指的是函数内部特殊的变量this
  • 弄清楚this的指向,可以使代码更加简洁
  • 普通函数里面this指向的是window
  • 函数的调用方式不同,this指代的对象也不同
  • 谁调用,this就是谁

二.回调函数

将一个A函数作为参数传递给另一个B函数时,A称为回调函数

function fn(){ console.log(\'我是回调函数...\')}//fn传递给了setIntervalsetInterval(fn,1000)//fn是回调函数
  • 回调函数本质还是函数,只是当成参数传递
  • 使用匿名函数作为回调函数比较常见

三.事件流 

1.定义

  • 时间完整执行过程中的流动路径
  • 捕获阶段:从父到子     冒泡阶段:从子到父
  • 主要使用冒泡

2.语法

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

addEventListener第三个参数传入true代表是捕获阶段触发

传入false代表冒泡阶段,默认值是false

3.事件冒泡

  • 当一个元素触发事件,会依次向上调用所有的父级元素的同名事件
  • 事件冒泡是默认存在的
  • 事件监听的第三个参数是false,或者默认都是冒泡

4.阻止冒泡

问题:默认有冒泡模式的存在,所以容易导致事件影响到父级元素

需求:想把事件限制在当前元素内,需要阻止事件冒泡

前提:阻止事件冒泡需要拿到事件对象

注意:可以阻断事件流动的传播(冒泡阶段+捕获阶段)

语法:

 事件对象.stopPropagation()

5.解绑事件

a.on事件方式,直接使用null覆盖实现实现的解绑

btn.onclick= function () { alert(\'点击了\') } //解绑事件 btn.onclick = null

b.使用addEventListener方式,必须使用removeEventListener(事件类型,事件处理函数,[捕获阶段或者冒泡阶段])

 function fn() { alert(\'点击了\') } //绑定事件 btn.addEventListener(\'click\', fn) //解绑事件 btn.removeEventListener(\'click\',fn)

匿名函数无法被解绑

四.事件委托

  • 优点:减少注册次数,可以提高程序性能
  • 原理:事件委托其实是利用时间冒泡的特点(触发子元素的时候,冒泡到父元素身上,从而粗发父元素的事件)
  • 实现:事件对象.target,tagName可以获得真正粗发事件的元素
 const ul = document.querySelector(\'ul\')//直接获取父元素并绑定 ul.addEventListener(\'click\', function (e) { if (e.target.tagName === \'LI\') { e.target.style.color = \'red\'//给点击到的小li字体标红 } })

7.阻止默认行为

事件对象.preventDefault()

//比如阻止链接的跳转,表单域跳转

五.其他事件

 1.页面加载事件

a.

  • 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
  • 有时候需要等页面资源全部处理完了做一些事情
  • 事件名:load
  • 监听页面所有资源加载完毕:给window添加load事件
//页面加载事件window.addEventListener(\'load\',function(){ //执行的操作})
  • 等待页面所有资源加载完毕,就回去执行回调函数
  • 注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件

b.

  • 当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载(比load效率快)
  • 事件名:DOMContentLoaded
  • 给document添加DOMContentLoaded事件
document.addEventListener(\'DOMContentLoaded\',function(){ //执行操作})

2.元素滚动事件

  • 滚动条在滚动的时候持续触发的事件
  • 很多网页需要监测用户把网页滚动到某个区域后做一些处理,比如一些固定导航栏,比如返回顶部
  • 事件名:scroll(给window/document加)
  • 监听整个页面的滚动
  • 监听某个元素内部滚动
//页面滚动事件window.addEventListener(\'scroll\',function(){ //执行操作})

scrollLeft和scrollTop(属性)

  • 获取被卷去的内容大小
  • 获取内容往左往上滚出去看不出的距离
  • 这两个值可以读写(可赋值)--数字型  不带单位
  • 获取html便签元素:document.documentElement

开发中,进厂检测页面滚动的距离,比如页面滚动100px,就可以显示一个元素,或者固定一个元素

 window.addEventListener(\'scroll\', function () {// document.documentElement是html元素的获取方式 const n = document.documentElement.scrollTop console.log(n) })

了解:滚动到指定的坐标scrollTo()

scrollTo(方法)可把内容滚动到指定的坐标

//让页面滚动到y轴1000像素的位置window.scrollTo(0,1000)

单位默认为px

3.页面尺寸事件

a.resize

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

window.addEventListener(\'resize\',function(){//执行的代码})

b.检测屏幕的宽度

 window.addEventListener(\'resize\', function () { let w = document.documentElement.clientWidth console.log(w) })

clientWidth和clientHeight获取元素可见部分宽高(不包含边框,margin,滚动条等)

六.元素尺寸与位置

1.获取宽高

  • 获取元素的自身宽高、包含元素自身设置的宽高padding、border
  • offsetWidth和offsetHeight
  • 获取出来的是数值、方便计算
  • 注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0

2.获取位置

  • 获取元素距离自己定位父级元素的左、上距离
  • offsetLeft和offsetTop注意是只读属性
  • 使用getBoundingClientRect()方法
网络标签：

相关问题