网站建设 跑业务,小城市网站建设,wordpress恢复备份,网络优化行业的发展前景1. 事件流
事件流指的是事件完整执行过程中的流动路径 任意事件被触发时总会经历两个阶段#xff1a;【捕获阶段】和【冒泡阶段】
事件捕获
概念#xff1a;从DOM的根元素开始去执行对应的事件#xff08;从外到里#xff09;
捕获阶段是【从父到子】的传导过程
代码【捕获阶段】和【冒泡阶段】
事件捕获
概念从DOM的根元素开始去执行对应的事件从外到里
捕获阶段是【从父到子】的传导过程
代码DOM.addEventListener事件类型, 事件处理函数, 是否使用捕获机制)
addEventListener第三个参数传入true 代表是捕获阶段触发(很少使用)若传入false代表冒泡阶段触发默认就是false若是用L0事件监听则只有冒泡阶段没有捕获
const fa document.querySelector(.father)const son document.querySelector(.son)// 山东 济南 蓝翔 目标pink老师 捕获阶段// 蓝翔 济南 山东 冒泡阶段document.addEventListener(click, function () {alert(我是爷爷)}, true)fa.addEventListener(click, function () {alert(我是爸爸)}, true)son.addEventListener(click, function () {alert(我是儿子)}, true)事件冒泡
概念当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
冒泡阶段是【从子向父】的传导过程
简单理解当一个元素触发事件后会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的L2事件监听第三个参数是 false或者默认都是冒泡
const father document.querySelector( .father )
const son document.querySelector(.son)document.addEventListener( click, function (){alert(我是爷爷)
})
fa.addEventListener(click,function () {alert(我是爸爸)
})
son.addEventListener(click, function () {alert(我是儿子)
})实际工作都是使用事件冒泡为主
阻止冒泡
问题因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素
需求 若想把事件就限制在当前元素内就需要阻止事件冒泡
前提阻止事件冒泡需要拿到事件对象
语法事件对象.stopPropagation()
注意此方法可以阻断事件流动传播不光在冒泡阶段有效捕获阶段也有效
const father 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()
})解绑事件
on事件方式直接使用null覆盖偶就可以实现事件的解绑
语法
//L0事件移除
const btn document.querySelector( .button )
// 绑定事件
btn.onclick function () {alert(点击了 )
}
// 解绑事件
btn.onclick nullconst btn document.querySelector( .button )
function fn() {alert(点击了)
}
btn.addEventListener(click, fn)
// L2 事件移除解绑
btn.removeEventListener(click,fn)阻止元素默认行为
某些情况下需要阻止默认行为的发生比如 阻止 链接的跳转表单域跳转
语法 e.preventDefault() form actionhttp://www.itcast.cninput typesubmit value免费注册/forma hrefhttp://www.baidu.com百度一下/ascriptconst form document.querySelector(form)form.addEventListener(submit, function (e) {// 阻止默认行为 提交e.preventDefault()})const a document.querySelector(a)a.addEventListener(click, function (e) {e.preventDefault()})/script鼠标经过事件的区别
鼠标经过事件: mouseover和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)
两种注册事件的区别
传统on注册 (L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)直接使用null覆盖偶就可以实现事件的解绑都是冒泡阶段执行的
事件监听注册 (L2)
语法:addEventListener(事件类型,事件处理函数是否使用捕获)后面注册的事件不会覆盖前面注册的事件(同一个事件)可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型,事件处理函数取捕获或者冒泡阶段匿名函数无法被解绑
2. 事件委托
事件委托是利用事件流的特征(事件冒泡解决一些现实开发需求的知识技巧主要的作用是提升程序效率。
优点减少注册次数可以提高程序性能
原理事件委托其实是利用事件冒泡的特点
给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件
实现事件对象.target.tagName可以获得真正触发事件的元素
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyulli第1个孩子/lili第2个孩子/lili第3个孩子/lili第4个孩子/lili第5个孩子/lip我不需要变色/p/ulscript// 点击每个小li 当前li 文字变为红色// 按照事件委托的方式 委托给父级事件写到父级身上// 1. 获得父元素const ul document.querySelector(ul)ul.addEventListener(click, function (e) {// alert(11)// this.style.color red// console.dir(e.target) // 就是我们点击的那个对象// e.target.style.color red// 我的需求我们只要点击li才会有效果if (e.target.tagName LI) {e.target.style.color red}})/script
/body/html3. 其他事件
页面加载事件
load事件
加载外部资源如图片、外联CSS和JavaScript等加载完毕时触发的事件
原因
有些时候需要等页面资源全部处理完了做一些事情老代码喜欢把script写在head中这时直接找dom元素找不到
事件名load
监听页面所有资源加载完毕给window添加load事件
// 页面加载事件
window.addEventListener(load, function() {// 执行的操作
})DOMContentLoaded
当初始的 HTML文档被完全加载和解析完成之后DOMContentLoaded 事件被触发而无需等待样式表、图像等完全加载
事件名DOMContentLoaded 监听页面DOM加载完毕给document添加DOMContentLoaded 事件
document.addEventListener( DOMContentLoaded, function (){// 执行的操作
}元素滚动事件
滚动条在滚动的时候持续触发事件
原因很多网页需要检测用户把页面滚动到某个区域后做一些处理比如固定导航栏、返回顶部
事件名scroll
监听整个页面滚动给window或document添加scroll事件
// 页面滚动事件
window.addEventListener(scroll, function() {// 执行的操作
})获取位置
scrollLeft和scrollTop (属性)
获取被卷去的大小获取元素内容往左、往上滚出去看不到的距离这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离
div.addEventListener( scroll,function (){console.log(this.scrollTop)
})!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {padding-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid #000;}/style
/headbodydiv我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字/divscriptconst div document.querySelector(div)// 页面滚动事件window.addEventListener(scroll, function () {// console.log(我滚了)// 我想知道页面到底滚动了多少像素 被卷去了多少 scrollTop// 获取html元素写法 // document.documentElement // console.log(document.documentElement.scrollTop)const n document.documentElement.scrollTopif (n 100) {div.style.display block} else {div.style.display none}})// const div document.querySelector(div)// div.addEventListener(scroll, function () {// // console.log(111)// // scrollTop 被卷去的头部// console.log(div.scrollTop)// })/script
/body
/htmlscrollTop (属性)的小细节
scriptdocument.documentElement.scrollTop 800window.addEventListener(scroll, function () {// 必须写到里面const n document.documentElement.scrollTop// 得到是什么数据 数字型 不带单位// console.log(n)})/script页面尺寸事件
4. 元素尺寸与位置
