官方网站建设专业公司,广告牌图片100例,wordpress数字主题,西安未央网站建设一、事件流
1.1 事件流与两个阶段说明 事件流 指的是事件完整执行过程中的流动路径 假设页面有个div标签#xff0c;当触发事件时#xff0c;会经历两个阶段#xff0c;分别是捕获阶段、冒泡阶段 捕获阶段#xff1a;Document - Element html - Elementbody - Element div…一、事件流
1.1 事件流与两个阶段说明 事件流 指的是事件完整执行过程中的流动路径 假设页面有个div标签当触发事件时会经历两个阶段分别是捕获阶段、冒泡阶段 捕获阶段Document - Element html - Elementbody - Element div 简单来说就是父到子 冒泡阶段Element div - Elementbody - Element html - Document 简单来说就是子到父 事件冒泡的过程与事件捕获完全相反 实际工作都是使用事件冒泡为主 事件对象.stopPropagation() 1.2 事件捕获 从DOM的根元素开始去执行对应的事件从外到里 语法 元素对象.addEventListener(事件类型,function (){}, 是否使用捕获机制) 说明 addEventListener的第三个参数传入true代表是捕获阶段触发 若传入false代表冒泡阶段触发默认就是false 若是使用L0事件监听则只有冒泡阶段没有捕获 例 style.father{width: 500px;height: 300px;background-color: lightskyblue;}.son{width: 200px;height: 100px;background-color: black;}
/style
body
div classfatherdiv classson/div
/div
scriptconst fa document.querySelector(.father)const son document.querySelector(.son)document.addEventListener(click,function (){alert(我是一级)}, true)fa.addEventListener(click,function (){alert(我是二级)}, true)son.addEventListener(click,function (){alert(我是三级)}, true)// 一级 二级 三级
/script
/body 弹出顺序 我是一级我是二级我是三级。 1.3 事件冒泡 定义 当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。简单理解就是当一个元素触发事件后会依次向上调用所有父级元素的同名事件 事件冒泡是默认存在的 L2事件监听的第三个参数默认传的就是false,代表这个事件进行冒泡 例 style.father{width: 500px;height: 300px;background-color: lightskyblue;}.son{width: 200px;height: 100px;background-color: black;}
/style
body
div classfatherdiv classson/div
/div
scriptconst fa document.querySelector(.father)const son document.querySelector(.son)document.addEventListener(click,function (){alert(我是一级)})fa.addEventListener(click,function (){alert(我是二级)})son.addEventListener(click,function (e){alert(我是三级)e.stopPropagation() // 借助事件对象 进行流的阶段})// 默认的就是false 就是冒泡 冒泡同名事件// 三级 二级 一级// 阻止冒泡 或者 捕获 就是 事件对象.stopPropagation()
/script
/body 触发顺序 我是三级我是二级我是一级 1.4 阻止冒泡 原因因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内就需要阻止事件冒泡。 语法 事件对象.stopPropagation() 不仅可以阻止事件冒泡还和阻止事件捕获。 style.father{width: 500px;height: 300px;background-color: lightskyblue;}.son{width: 200px;height: 100px;background-color: black;}
/style
body
div classfatherdiv classson/div
/div
scriptconst fa document.querySelector(.father)const son document.querySelector(.son)document.addEventListener(click,function (){alert(我是一级)})fa.addEventListener(click,function (){alert(我是二级)})son.addEventListener(click,function (e){alert(我是三级)e.stopPropagation() // 借助事件对象 进行流的阶段})// 阻止冒泡 或者 捕获 就是 事件对象.stopPropagation()
/script
/body 还有其他的阻止默认行为比如表单的默认提交链接的跳转表单域跳转。 如:事件对象.preventDefault() body
form actionhttp://www.baidu.cominput typesubmit value提交
/form
scriptconst form document.querySelector(form);form.addEventListener(click, function(e) {// 阻止表单默认提交行为e.preventDefault();});
/script
/body 1.5 解绑事件 对应L0的on事件 可以直接使用null覆盖就可以实现事件的解绑 body
button按钮/button
scriptconst btn document.querySelector(button)// L0的解绑方式btn.onclick function (){alert(点击了)}btn.onclick null // 给一个空对象 进行解绑
/script
/body addEventListener方式必须使用removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段]) body
button按钮/button
scriptconst btn document.querySelector(button)//最新的 L2function fn() {alert(点击了)}btn.addEventListener(click,fn)// L2 事件解绑 函数不能使用匿名函数btn.removeEventListener(click,fn)
/script
/body 注 匿名函数无法被解绑 二、事件委托 定义 事件委托是利用事件流的特征解决一些开发需求的知识技巧可以同时给多个元素注册相同事件。 优点 减少注册次数可以提高程序性能 原理 事件委托其实是利用事件冒泡的特点。给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事 件 实现 事件对象.target 是获取点击触发事件的元素对象 事件对象.target. tagName 可以获得真正触发事件的元素的名称(大写)如li的tagName就是‘LI’ body
ulli第1个孩子/lili第2个孩子/lili第3个孩子/lili第4个孩子/lili第5个孩子/lip我不需要变颜色/p
/ulscriptconst ul document.querySelector(ul)ul.addEventListener(click,function (e){// 获取点击的对象console.log(e.target);//只有点击li才会有效果 // 找到真正触发的元素e.target.tagName LI ? e.target.style.color red : null})
/script
/body 三、其他事件
3.1 页面加载事件 页面加载事件一 定义加载外部资源如图片、外联CSS和JavaScript等加载完毕时触发的事件 事件名load 监听页面所有资源加载完毕给window添加load事件 注 不光可以监听整个页面资源加载完毕也可以针对某个资源绑定load事件 headmeta charsetUTF-8title页面加载事件/title
!--JS写在上面 必须要用的加载事件--script// 监听整个页面资源加载完毕// 等待页面所有资源加载完成后再去执行回调函数 load//给window 添加 load事件window.addEventListener(load,function (){const btn document.querySelector(button)btn.addEventListener(click,function (){alert(点击了 按钮)})})// 针对某个资源绑定 load 事件document.querySelector(img).addEventListener(load,function (){// 等待图片加载完毕再去执行里面的代码})/script
/head
body
button按钮/button
img src
/body 页面加载事件二 定义当初始的 HTML 文档被完全加载和解析完成之后DOMContentLoaded 事件被触发而无需等待样式表、图像等完全加载 事件名DOMContentLoaded 监听页面DOM加载完毕给 document 添加 DOMContentLoaded事件 headmeta charsetUTF-8title页面加载事件/title
!--JS写在上面 必须要用的加载事件--script//监听页面DOM加载完毕//给document添加DOMContentLoaded事件// 无需等待样式表 图像等完全加载document.addEventListener(DOMContentLoaded,function (){// 执行的操作})/script
/head
body
button按钮/button
img src
/body 3.2 页面滚动事件 使用场景很多网页需要检测用户把页面滚动到某个区域后做一些处理 比如固定导航栏比如返回顶部 定义滚动条在滚动的时候持续触发的事件 事件名scroll 作用监听整个页面滚动给 window 或 document 添加 scroll 事件(监听某个元素的内部滚动直接给某个元素加即可) // 页面滚动事件// 可以给window 也可以给 document 加// 检测滚动的距离//document.documentElement.scrollTop 800 被卷去的头部window.addEventListener(scroll,function (){console.log(gun了) 3.2.1 页面滚动事件-获取位置 属性scrollLeft和scrollTop 获取被卷去的大小 获取元素内容往左、往上滚出去看不到的距离 这两个值是可读写的 注 尽量在scroll事件里面获取被卷去的距离 获取html 页面的最大标签元素 document.documentElement 开发中我们经常检测页面滚动的距离比如页面滚动100像素就可以显示一个元素或者固定一个元素。 stylebody {padding-left: 100px;height: 3000px;}div {overflow: scroll;margin: 0 auto;height: 500px;width: 300px;border: 1px solid black;}
/style
body
div里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字......
/div
scriptwindow.addEventListener(scroll,function (){// 获取html 页面的最大标签元素 document.documentElementconst n document.documentElement.scrollTop // 是数字型数据 可读写if (n 100){div.style.display block} else {div.style.display none}})
/script
/body 3.2.2页面滚动事件-滚动到指定的坐标 方法scrollTo() 方法可把内容滚动到指定的坐标 语法 元素对象.scrollTo(x, y) 例让页面滚动到 y 轴页面垂直方向1000像素的位置 window.scrollTo(0, 1000)
// 也相当于
document.documentElement.scrollTop 0 3.3 页面尺寸事件 事件名resize会在窗口尺寸改变的时候触发事件 获取元素宽高 事件名clientWidth和clientHeight获取元素的可见部分宽高不包含边框margin滚动条等 stylediv {display: inline-block;height: 200px;background-color: lightskyblue;padding: 10px;border: 20px solid black;}
/style
body
div121235453134532/div
scriptconst div document.querySelector(div);// 获取盒子的宽 或者 高 不包含边框 滚动条等console.log(div.clientWidth)// resize 页面缩放 浏览器窗口 大小发生变化的时候触发的事件// 目前更好的是CSS的媒体查询window.addEventListener(resize,function (){console.log(1)})
/script
/body 四、元素尺寸与位置 作用 就是通过js的方式得到元素在页面中的位置 获取宽高 获取元素的自身宽高、包含元素自身设置的宽高、padding、border offsetWidth和offsetHeight 获取出来的是数值,方便计算 注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0 获取位置1 获取元素距离自己定位父级元素的左、上距离 offsetLeft和offsetTop 注意是只读属性 stylediv {margin: 100px;width: 300px;height: 300px;border: 1px solid black;background-color: lightskyblue;}div p {padding: 50px;width: 100px;height: 100px;background-color: pink;}
/style
bodydivp/p/div
script// 获取元素距离自己定位祖先元素的左offsetLeft 上offsetTop 距离// 获取的位置 是包含 边框的const div document.querySelector(div)const p document.querySelector(p)// 外边框 到 最左边的距离 margin body 的8外边框console.log(div.offsetLeft)// 加上外边框到最左边的距离 margin body 的8外边框 div的1外边框console.log(p.offsetLeft)
/script
/body 获取位置2 元素对象.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置 stylebody {height: 2000px;}div {width: 300px;height: 300px;margin: 100px auto;background-color: lightskyblue;}
/style
body
div/div
scriptconst div document.querySelector(div)// 是盒子相对于当前视口的位置console.log(div.getBoundingClientRect());
/script
/body 五、 页面滚动事件和元素尺寸事件的属性总结 属性作用说明scrollLeft和scrollTop被卷去的左侧和头部配合页面滚动来用可读写clientWidth和clientHeight获得元素宽度和高度不包含border,margin滚动条 用于js 获取元素大小只读属性offsetWidth和offsetHeight获得元素宽度和高度包含border、padding滚动条等只读offsetLeft和offsetTop获取元素距离自己定位祖先元素的左、上距离获取元素位置的时候使用只读属性
