个人学习记录
文章目录
1.事件监听
语法:
元素对象.addEventListener('事件类型', 要执行的函数)
- 事件监听三要素:
– 事件源: 那个dom元素被事件触发了,要获取dom元素
– 事件类型: 用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等
– 事件调用的函数: 要做什么事
示例:
<body>
<button>点击</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('已提交')
})
</script>
</body>
1.1 事件类型
- 鼠标事件:
– click 鼠标点击
– mouseenter 鼠标经过
– mouseleave 鼠标离开 - 焦点事件
– focus 获得焦点
– blur 失去焦点 - 键盘事件
– Keydown 键盘按下触发
– Keyup 键盘抬起触发 - 文本事件
– input 用户输入事件
1.2 鼠标事件
<div class="mouse"></div>
<script>
const mouse = document.querySelector('.mouse');
mouse.addEventListener('mouseenter', function () {
mouse.style.backgroundColor = 'blue';
}
)
mouse.addEventListener('mouseleave', function () {
mouse.style.backgroundColor = 'pink'
})
</script>
1.2 焦点事件
<input type="text" class='focusThing'>
<script>
const input = document.querySelector('.focusThing');
input.addEventListener('focus', function () {
console.log('获取焦点');
})
input.addEventListener('blur', function () {
console.log('失去焦点')
})
</script>
2.事件对象
这个对象里有事件触发时的相关信息
例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
- 语法:如何获取
– 在事件绑定的回调函数的第一个参数就是事件对象
– 一般命名为event、ev、e
代码如下(示例):
元素.addEventListener('click', function (e) {
})
- 部分常用属性
-
- type
获取当前的事件类型
- type
-
- clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
- clientX/clientY
-
- offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
- offsetX/offsetY
-
- key
用户按下的键盘键的值
现在不提倡使用keyCode
- key
3.环境对象
指的是函数内部特殊的变量 this ,它代表着当前函数运行时所处的环境
【谁调用, this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数,其实相当于是 window.函数,所以 this 指代 window
4.回调函数
如果将函数 A 做为参数传递给函数 B 时,我们称函数 A 为回调函数
简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
5. 事件流
事件流指的是事件完整执行过程中的流动路径
假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段
- 简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父
- 实际工作都是使用事件冒泡为主
5.1 事件捕获
概念:从DOM的根元素开始去执行对应的事件 (从外到里)
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
- addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
- 若传入false代表冒泡阶段触发,默认就是false
- 若是用 L0 事件监听,则只有冒泡阶段,没有捕获
5.2 事件冒泡
概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。
- 简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的 同名事件
- 事件冒泡是默认存在的
-
- L2事件监听第三个参数是 false,或者默认都是冒泡
5.3 阻止冒泡
问题:因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素
需求:若想把事件就限制在当前元素内,就需要阻止事件冒泡
前提:阻止事件冒泡需要拿到事件对象
事件对象.stopPropagation()
我们某些情况下需要阻止默认行为的发生,比如 阻止 链接的跳转,表单域跳转
e.preventDefault()
6.解绑事件
btn.onclick = function(){
}
//解绑
btn.onclick = null
btn.addEventListener('click',fn())
//解绑
btn.removeEventListener('click',fn())
鼠标经过事件:
Ø mouseover 和 mouseout 会有冒泡效果
Ø mouseenter 和 mouseleave 没有冒泡效果 (推荐)
7. 事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点:减少注册次数,可以提高程序性能
原理:事件委托其实是利用事件冒泡的特点。给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
实现:事件对象.target. tagName 可以获得真正触发事件的元素
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
</ul>
<script>
const ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
e.target.style.color = 'red';
}
})
</script>
8.其他事件
8.1 页面加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
为什么要学?
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中,这时候直接找 dom 元素找不到
事件名:load
监听页面所有资源加载完毕:
给 window 添加 load 事件:
window.addEventListener('load',function(){
const btn = doc....
btn.addEventListener(...)
}
}
注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
事件名: DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后 DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载。
给 document 添加 DOMContentLoaded 事件:
document.addEventListener('DOMContentLoaded',function(){
//执行的操作
}
8.2 页面滚动事件
滚动条在滚动的时候持续触发的事件
为什么要学?
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理:比如固定导航栏,比如返回顶部
事件名:scroll
监听整个页面滚动:
window.addEventListener('scroll',function(){
//执行的操作
}
}
给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可
scrollLeft和scrollTop (属性)
- 获取被卷去的大小(不带单位)
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离
div.addEventListener('scroll',function(){
const n = document.documentElemrnt.scrollTop
})
document.documentElement // HTML文档返回对象为HTML元素
- scrollTo() 方法可把内容滚动到指定的坐标
- 元素.scrollTo(x, y)
8.3 页面尺寸事件
会在窗口尺寸改变时触发事件:
resize:
window.addEventListener('resize',function(){
//监测屏幕尺寸
let w = document.documentElement.clientWidth
//获取元素部分可见宽高(不包含边框,margin,滚动条等)
let h = document.documentElement.clientHeight
})
9. 元素的尺寸和位置
使用场景:最好是页面滚动到某个元素,就可以做某些事。
通过js的方式,得到元素在页面中的位置。
获取宽高:offsetWidth、offsetWidth
- 获取元素自身宽高,包含元素自身设置的宽高、padding、border。
- 获取出来的是数值,方便计算。
- 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
获取位置:offsetTop、offsetLeft
- offsetLeft和offsetTop 注意是只读属性。
- 获取元素距离自己定位父级元素的左、上距离
获取位置:element.getBoundingClientRect()
返回元素的大小及其相对于视口的位置