事件
事件监听
元素对象.addEventListener('事件类型'，要执行的函数)
-
事件源: 那个dom元素被事件触发了，要获取dom元素。
-
事件类型:用什么方式触发，比如鼠标单击click、鼠标经过 mouseover 等 。
-
事件调用的函数:要做什么事。
DOM LO：事件源.on事件=function() {}
DOM L2（推荐）：事件源.addEventListener(事件，事件处理函数)
两种注册事件的区别：
(LO)：
-
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
-
直接使用null覆盖偶就可以实现事件的解绑
-
都是冒泡阶段执行的事件
(L2)：
-
后面注册的事件不会覆盖前面注册的事件(同一个事件)
-
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
-
必须使用removeEventListener(事件类型，事件处理函数,获取捕获或者冒泡阶段)
-
匿名函数无法被解绑
如果不是现建函数，只写函数名即可，不用写括号。
注意:on方式会被覆盖，addEventListener方式不会覆盖，会依次多次运行。
常见事件对象属性部分常用属性:
-
type获取当前的事件类型
-
clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
-
offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
-
key 用户按下的键盘键的值现在不提倡使用keyCode
环境对象
环境对象:指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环镜。
弄清楚this的指向，可以让我们代码更简洁函数的调用方式不同，this指代的对象也不同。
【谁调用，this 就是谁]是判断 this 指向的粗略规则。
事件类型
鼠标事件
| 类型 | 解释 |
|---|---|
| click | 单机鼠标 |
| dblclick | 双击鼠标 |
| mousedown | 按下鼠标 |
| mouseup | 释放鼠标 |
| mouseenter | 鼠标经过 |
| mouseleave | 鼠标离开 |
鼠标经过事件的区别 mouseover 和mouseout 具有同样的效果，但会有冒泡效果。 mouseenter 和mouseleave没有冒泡效果(推荐)
自动播放模块
setInterval(function () {
// 利用js自动调用点击事件click() 一定加小括号调用函数
next.click()
}，1000)
焦点事件
focus 获得焦点 blur失去焦点
键盘事件
keydown：按下键盘时触发 keyup：放开键盘时触发该事件
// 按下回车发布评论
tx.addEventListener('keyup', function (e) {
// 只有按下的是回车键，才会触发
if (e.key === 'Enter' ) {
//如果用户输入的不为空就显示和打印
if (tx.value.trim() !== '') {
item.style.display ='block'
//用户输入的内容
text.innerHTML = tx.value
}
// 等我们按下回车，结束，清空文本域
tx.value = ''
}
.trim()能去除字符串两边的空格，中间的不去，全为空格则清空。
事件流
解释说明
事件流指的是事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段，简单来说，捕获阶段是 从父到子冒泡阶段是从子到父。 实际工作都是使用事件冒泡为主
事件捕获
从DOM的根元素开始去执行对应的事件(从外到里)事件捕获需要写对应代码才能看到效果代码:
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
说明:
addEventListener第三个参数传入true 代表是捕获阶段触发(很少使用)，传入false代表冒泡阶段触发，默认就是false。
若是用 LO事件监听，则只有冒泡阶段，没有捕获阶段。
事件冒泡
事件简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。 事件冒泡是默认存在的
L2事件监听第三个参数是false，或者默认都是冒泡
const son = document.querySelector('.son')
const fa = document.querySelector('.father')
document.addEventListener('click', function() {alert('我是爷爷')})
fa.addEventListener('click'， function () {alert('我是爸爸')})
son.addEventListener('click', function () {alert('我是儿子')})
//会从son到fa到document依次运行
阻止冒泡
因为默认就有冒泡模式的存在，可能会影响父级效果，若想把事件就限制在当前元素内，就要阻止。
阻止事件冒泡语法:
事件对象.stopPropagation()
注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。
我们某些情况下需要阻止默认行为的发生，比如 阻止链接的跳转，表单域跳转
语法：e.preventDefault()
<form action="http://www.baidu.com">
<input type="submit"value="提交">
</form>
<script>
const form = document.querySelector('form')
// 阻止表单默认提交行为
form.addEventListener('click'， function (e) {
e .preventDefault()
})
解绑事件
DOM LO：事件源.on事件=function() {} 直接使用null覆盖偶就可以实现事件的解绑。
事件源.on事件= null
addEventListener方式，必须使用：removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])
例如:
function fn() {
alert('点击了')
}//绑定事件
btn.addEventListener('click', fn)
// 解绑事件
btn.removeEventListener('click'， fn)
注意：匿名函数不能被解绑。
事件委托
事件委托其实是利用事件冒泡的特点： 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName 可以获得真正触发事件的元素。
const ul = document.querySelector('ul')
ul.addEventListener('click', function(){}) 执行父级点击事件
ul.addEventListener('click'， function (e)
{
if (e.target.tagName === 'LI') {
this.style.color ='pink'
}
})
事件对象.target.tagName得出类字符串大写。
其他事件
页面加载事件
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找dom元素找不到。
事件名:load 监听页面所有资源加载完毕： 给window 添加 load 事件
// 页面加载事件
window.addEventListener('load'， function () {
// 执行的操作})
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件，如img等图片加载完。
例子：
<head>
<script>
// 等待页面所有资源加载完毕，就回去执行回调函数
window.addEventListener('load'， function () {
const btn = document.querySelector('button')
btn.addEventListener('click'， function ( ) { alert(11)})})
</script>
</head>
<body>
<button>点击</button>
</body>
事件名:DOMContentLoaded监听页面DOM加载完毕:
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载。
给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded'，function () {
// 执行的操作})
页面滚动事件
很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部。
事件名:scroll监听整个页面滚动:
// 页面滚动事件
window.addEventListener('scroll'，function (){
// 执行的操作})
给window或document 添加scroll 事件都可以。
页面滚动事件-获取位置scrollLeft和scrollTop(属性) 获取被卷去的大小 获取元素内容往左、往上滚出去看不到的距离，尽量在scroll事件里面获取被卷去的距离。
div.addEventListener('scroll'， function () {
console.log(this.scrollTop)})
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素。
document.body <body>...</body> document.html undefined document.documentElement html
获取HTML用document.documentElement 不能用document.html 。
//页面滚动事件
window.addEventListener('scroll',function () {
// document.documentELement 是htmL元素获取方式
const n = document.documentElement.scrollTop
console.log(n)
})
document.documentElement.scrollTop得到的数据为数字型不带单位。
页面滚动事件-滚动到指定的坐标 scrollTo()方法可把内容滚动到指定的坐标。
语法:元素.scrollTo(x,y)
// 让页面滚动到y轴1000像素的位置 window.scrollTo(0，1000)
练习：
以下#backTop的ID为返回顶部按钮
.xtx-elevator为不同部分的电梯按钮
<script>
// 获取元素
const elevator = document.querySelector('.xtx-elevator' )
// 1.当页面滚动大于 300像素，就显示电梯导航
// 2、给页面添加滚动事件
window.addEventListener('scroll'， function () {
// 被卷去的头部大于 300
const n = document.documentElement.scrollTop
elevator.style.opacity = n >= 300 ?1:0
// 点击返回页面顶部
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
//可读写
document.documentElement.scrollTop =0
})
</script>
3231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
