事件
事件监听
元素对象.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>