js-webApi 笔记2之DOM事件
目录
1、表单事件
2、键盘事件
3、事件对象
4、排他思想
5、事件流
6、捕获和冒泡
7、阻止默认和冒泡
8、事件委托
9、事件解绑
10、窗口加载事件
11、窗口尺寸事件
12、元素尺寸和位置
13、窗口滚动事件
14、日期对象
15、节点
16、鼠标移入事件
1、表单事件
获取焦点 onfoucus
失去焦点 onblur
2、键盘事件
input事件 输入内容就触发 实时获取文本框内容
keyup 键盘抬起keydown 键盘按下 获取的是上一次的内容
事件执行顺序 keydown ---->input ----->keyup
获取用户输入的完整内容 keyup 或 input
3、事件对象
事件对象：当事件发生后，浏览器会把当前事件相关的信息会封装成一个对象
获取： 事件处理程序的第一个形参
常用事件对象属性 e.target---->事件源 e.key---->按键字符串e.key 判断按的是什么键
Document
1223
4、排他思想
排他思想就是清除其他人的样式，只给自己设置
Document
div1
div2
div3
div4
5、事件流
事件流->事件完整执行过程中的流动路径
捕获阶段->目标阶段->冒泡阶段
window->document->html->body->div->body->html->document->window
捕获阶段：document-- >html-->body-->div-->span
目标阶段: sapn
冒泡阶段: span-- > div-- > body-- > html-- > document
Document
son
6、捕获和冒泡
捕获和冒泡：
js里不会同时出现捕获和冒泡阶段，只能出现一个
传统事件 onclick只有冒泡阶段 传统事件中如果给一个元素添加多个相同的事件时会出现覆盖
事件监听addEventListener(事件类型，事件处理程序，布尔值)
事件监听可以给元素添加多个相同的事件，会自上而下按顺序执行
如果布尔值为空或false时，是冒泡阶段 为true时是捕获阶段
7、阻止默认和冒泡
阻止默认和冒泡：
e.preventDefault() 阻止默认行为
e.stopPropagation() 阻止冒泡行为
Document
百度
8、事件委托
事件委托：给父元素添加事件来处理子元素，原理是使用冒泡 ，点击谁谁的背景颜色发生改变
e.target
ul li 中 给li设置背景颜色，给ul设置事件来设置li，提高了代码程序的性能
鼠标位置：clientX/Y 相对于可视窗口的X，Y轴的坐标
pageX/Y 是相对于页面的坐标
screenX/Y 相对于屏幕的位置
Document
- iii
- bbb
- ccc
- sss
9、事件解绑
对dom 0 级进行解绑
const btn=document.querySelectorAll('button')
btn[0].onclick=function() {
alert('dom1')
btn[0].onclick='null' //解绑dom 0 级
}对dom 2级进行解绑
const btn=document.querySelectorAll('button')
function f(){
alert('dom2')
btn[1].removeEventListener('click',f) //dom2 级 解绑
}
btn[1].addEventListener('click',f)10、窗口加载事件
window加载事件：等页面元素全部加载完成才执行onload里面的代码
窗口加载 onload 文档全部加载完毕包括css图片js等资源
window.addEventListener( 'load' , function ( ){ } )
DＯＭContentLoaded 当dom元素加载完毕就执行，不必等其他资源加载完（加载速度快）
window.addEventListener( 'DOMContentLoaded' , function ( ){ } )
11、窗口尺寸事件
window.addEventListener( ' resize',function( ) {
console.log('窗口大小改变了');
console.log(document.documentElement.clientWidth) //获取屏幕尺寸
})12、元素尺寸和位置
元素尺寸或位置 client offset 尺寸 scroll 位置
clientWidth 内容宽+左右 padding
clientHeight 内容高+上下 paddingoffsetWidth 带边框的 clientWidth 内容宽+左右padding+左右border
scrollWidth 实际内容区域（包括隐藏的内容）offsetLeft / offsetTop
offsetLeft 距离参照物(以最近的带有定位的祖先元素，没有则参照物文档)左侧距离
Document
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
13、窗口滚动事件
window.addEventListener( 'scroll', function( ) {
console.log(document.documentElement.scrollTop)//页面被卷去的尺寸
})
14、日期对象
方法：
getFullYear 获取四位年份
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59
时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。
获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
// 1. 实例化
const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())
// 还有一种获取时间戳的方法
console.log(+new Date())
// 还有一种获取时间戳的方法
console.log(Date.now())15、节点
查找节点
1.通过节点关系查找元素 元素.parentNode2.子节点 元素.children 伪数组 本质是对象 {0:... ,1:***, length : 20}
元素.childNodes 所有儿子，包括文本节点 可以获取文本换行
3.兄弟节点
previousSibling 了解 打印的是文本（比如换行）
previousElementSibling 上一个兄弟
nextElementSibling 下一个兄弟
插入节点
createElement动态创建任意 DOM 节点
cloneNode复制现有的 DOM 节点，传入参数 true 会复制所有子节点
appendChild在末尾（结束标签前）插入节点
insertBefore在父节点中任意子节点之前插入新节点prepend(添加的元素) 在父元素的第一个子元素之前添加 每次在前面加
Document
✖️
- 中国
- 韩国
- 朝鲜
- 缅甸
删除节点
元素.remove( )
Document
- 111
- 222
16、鼠标移入事件
mouseover 会冒泡
mouseenter 不会冒泡
移动端
touchstart 触摸开始
touchmove 触摸移动
touchend 触摸结束
Document