个人网站备案需要哪些材料,建设设计网站,2022新闻大事件摘抄,网站说明页内容维护事件对象
事件对象有事件触发时的相关信息#xff0c;如点击事件中事件对象储存了鼠标点在哪个位置的信息 场景#xff1a;
用户按下了哪个键#xff0c;按下回车键可以发布新闻
鼠标点击了哪个元素#xff0c;从而做哪些操作 参数e为事件对象 常用属性
type
获取当前…事件对象
事件对象有事件触发时的相关信息如点击事件中事件对象储存了鼠标点在哪个位置的信息 场景
用户按下了哪个键按下回车键可以发布新闻
鼠标点击了哪个元素从而做哪些操作 参数e为事件对象 常用属性
type
获取当前事件类型
clientX/clientY
获取光标相对浏览器可见窗口左上角位置
offsetX/offsetY
获取光标相对当前DOM元素左上角位置 key
用户按下键盘的值 环境对象
能够分析判断函数运行在不同环境中this所指代的对象
其指的是函数内部特殊的变量this代表着当前函数运行时所处环境
每个函数里都有this普通函数里的this指向window
事件所调用的函数this对象指向调用者 回调函数
将函数A作为参数传递给函数B称函数A为回调函数 fn即为回调函数 表单全选反选案例 选择被勾选的复选框 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0, maximum-scale1.0, minimum-scale1.0, user-scalablenotitle~/titlelink relshortcut icon hrefhttps://www.bilibili.com/favicon.icolink relstylesheet hrefcss/初始化表.csslink relstylesheet hrefcss/index.cssmeta namekeywords content... /style/*写代码时始终要考虑权重问题*/font-face {font-family: icomoon;src: url(fonts/icomoon.eot?au9n7q);src: url(fonts/icomoon.eot?au9n7q#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?au9n7q) format(truetype),url(fonts/icomoon.woff?au9n7q) format(woff),url(fonts/icomoon.svg?au9n7q#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}table {border-collapse: collapse;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;padding: 10px;color: #404060;}.allCheck {width: 80px;}/style
/headbodytabletrth classallCheckinput typecheckbox idcheckAllspan classall全选/span/thth商品/thth商家/thth价格/th/trtrtdinput typecheckbox classck/tdtd小米手机/tdtd小米/tdtd1999/td/trtrtdinput typecheckbox classck/tdtd小米净水器/tdtd小米/tdtd4999/td/trtrtdinput typecheckbox classck/tdtd小米电视/tdtd小米/tdtd5999/td/tr/tablescriptconst checkAll document.querySelector(#checkAll)const cks document.querySelectorAll(.ck)checkAll.addEventListener(click, function () {for (let i 0; i cks.length; i) {cks[i].checked checkAll.checked}})for (let i 0; i cks.length; i) {cks[i].addEventListener(click, function () {checkAll.checked (document.querySelectorAll(.ck:checked).lengthcks.length)})}/script
/body/html 两种注册事件
传统on注册L0
同一个对象后面注册的事件会覆盖前面注册(同一个事件) 直接使用null覆盖偶就可以实现事件的解绑 都是冒泡阶段执行的 事件监听注册(L2)
语法 addEventListener(事件类型事件处理函数是否使用捕获) 后面注册的事件不会覆盖前面注册的事件(同一个事件) 可以通过第三个参数去确定是在冒泡或者捕获阶段执行 必须使用removeEventListener(事件类型事件处理函数获取捕获或者冒泡阶段) 匿名函数无法被解绑 事件流
事件完整执行过程中流动路径
触发事件时经历两个阶段捕获阶段冒泡阶段 事件冒泡
当一个元素的事件被触发时同样事件将会在该元素所有祖先元素中依次被触发
即当一个元素触发事件后依次向上调用所有父级元素的同名事件 但我们不需要父类触发事件时需要阻止冒泡
阻止冒泡
容易导致事件影响到父类元素
把事件限制在当前元素内进行阻止我们需要拿到事件对象
语法
事件对象.stopPropagation() 如此即可阻止 事件解绑
如果用L2使用removeEventListener事件类型事件处理函数[获取捕获或冒泡阶段] 注意匿名函数无法解绑 鼠标经过事件
mouseover和mouseout 会有冒泡效果
mouseoenter和mouseleave 没有冒泡效果推荐 事件委托
利用事件流的特征解决一些开发需求的知识技巧
减少注册次数提高程序性能
原理利用事件冒泡
给父元素注册事件当触发子元素时会冒泡到父元素身上从而触发父元素的事件 阻止元素默认行为
比如阻止链接、表单域跳转
语法
e.preventDefault() 其他事件
1.页面加载事件了解
加载外部资源图片、外联和js等加载完毕时触发的事件
有时候需要等页面资源全部处理完做一些事
事件名load 使用load可以是js代码写在任意位置等页面加载完毕再执行
其不光可以监听整个页面加载完毕可以对某一资源如图片绑定load事件 另一事件DOMContentLoaded
无需等待样式表、图片等加载完毕只需HTML文档完全加载和结息完成后即可 2.元素滚动事件
滚动条在滚动时持续触发的事件
检测用户把网页滚动到某个区域后做出一些处理
事件名scroll
监听整个页面滚动 如监听某元素内部滚动直接给该元素加即可 使用场景
比如滚动一段距离让某些元素隐藏
该距离可让 scroll 检测 scrollLeft和scrollTop
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
可读写可获取值也可赋值如回到顶部 获取html的元素写法
document.documentElement返回数字型 3.元素尺寸与位置
clientWidth和clientHeight了解
获取元素可见部分宽高不包括边框、外边距 offsetWidth和offsetHeight
获取宽高
获取元素宽高包括边框、外边距
获取数值方便计算
注意获取的是可视宽高如果隐藏结果为0 获取位置
offsetLeft和offsetTop对比绝对定位
获取元素距离自己定位父类元素的左、上距离
注意为只读属性
得到位置以谁为准
带有定位的父级若没有定位以文档左上角为准
