当事件触发的时候 ,会产生对象,记录一些事件和有关信息
事件处理函数中,形参就是事件对象
document.addEventListener('click' , function(e) {
// e就是事件对象
// 关于事件对象,如果需要使用,就写上形参e,不需要使用,可以忽略不写
console.log(e)
})
获取鼠标的位置信息
pageX :距离页面左侧的水平距离
pageY: 距离页面上侧的垂直距离
示例:
document.addEventListener('click' , function(e) {
console.log(e.pageX , e.pageY)
})
效果:
获取用户按键信息
用户按下键盘的值
示例:
document.addEventListener('keydown' , function(e) {
console.log('键盘按下' , e.key)
// keydown按下不松手会频繁触发事件,所以一般使用keyup事件
})
document.addEventListener('keyup' , function(e) {
console.log('键盘弹起' , e.key)
})
指的是事件完整执行过程中的流动路径
两个阶段:先捕获在冒泡
捕获阶段是 从父到子
冒泡阶段是 从子到父
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
// 演示事件冒泡
document.addEventListener('click' , function(){
console.log('我是document')
})
document.body.addEventListener('click' , function() {
console.log('我是body')
})
fa.addEventListener('click' , function() {
console.log('我是father')
})
son.addEventListener('click' , function() {
console.log('我是son')
})
点击 son:
鼠标经过事件:
mouseover
和 mouseout
会有冒泡效果mouseenter
和 mouseleave
没有冒泡效果 (推荐)概念:
从DOM的根元素开始去执行对应的事件。
addEventListener第三个参数传入true代表是捕获阶段触发
document.addEventListener('click' , function(){
console.log('我是document')
},true)
document.body.addEventListener('click' , function() {
console.log('我是body')
},true)
fa.addEventListener('click' , function() {
console.log('我是father')
},true)
son.addEventListener('click' , function() {
console.log('我是son')
},true)
事件对象.stopPropagation()
此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
son.addEventListener('click', function (e) {
console.log('is son')
//阻止事件流,,直接在father上被掐断了,也不会冒到body document。。。
e.stopPropagation()
})
fa.addEventListener('click', function (e) {
console.log('is father')
})
所谓阻止默认行为,比如链接点击不跳转,表单域不提交
e.preventDefault()
<a href="http://www.baidu.com">跳转到百度</a>
<script>
// 阻止浏览器的默认行为
// 事件对象e有 方法可以来阻止浏览器的默认行为
let a = document.querySelector('a')
a.addEventListener('click', function (e) {
e.preventDefault()
alert('哈哈,被点击了,但是没跳转~')
})
</script>
事件冒泡,点击子元素时,冒泡冒到了父元素,所以给父元素注册的事件,子元素也能触发。
事件对象.target
可以获得真正触发事件的元素
使用tagName
属性可以得到元素名(注意得到的元素名是大写)
let box = document.querySelector(".box");
let ps = document.querySelectorAll(".box p");
let create = document.querySelector(".create");
// 常规做法:找到所有的p,给所有的p注册click
// 缺点:1. 有较大性能消耗 2. 无法给动态新创建的元素注册事件(触发事件)
for (let i = 0; i < ps.length; i++) {
ps[i].onclick = function () {
alert("哈哈")
}
}
// 点击按钮,新建p添加到div中
create.addEventListener('click', function () {
let newP = document.createElement('p')
newP.innerHTML = '新建的p'
box.appendChild(newP)
})
// 事件委托做法:
// 做法:把事件委托注册给父元素(祖先元素)
// 优点:可以提高性能,给动态新创建的元素注册事件
// 原理:事件冒泡
box.addEventListener('click' , function(e) {
//事件对象.target 可以获得真正触发事件的元素,使用tagName可以得到元素名(注意是大写)
console.log(e.target , e.target.tagName)
if(e.target.tagName === 'P') alert('p被点击啦~')
})
// 需求:按钮的点击事件只能触发一次
// 解绑事件
// 解绑语法: 元素.onclick = null
btn.onclick = function() {
console.log('我被点击啦')
// 解绑按钮注册的点击事件
btn.onclick = null
}
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
// addEventListener 注册的事件如何解绑 ==> 需要使用removeEventListener来进行解绑
// **匿名函数无法解绑**
// 所以 以下注册事件无法解绑
/* btn.addEventListener('click' , function() {
})
btn.removeEventListener('click' , function() {
}) */
// **正确解绑方法 把匿名函数写成具名函数**
function fn() {
console.log('我点击了')
// 解绑 效果是只能点击一次
btn.removeEventListener('click' , fn)
}
btn.addEventListener('click' , fn)
当页面进行滚动时触发的事件
事件名:
scroll
给 window 或 document 添加 scroll 事件
例如:监听整个页面滚动
window.addEventListener('scroll' , function() {
})
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件。
给window添加
不仅可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
例如:监听页面所有资源加载完毕:
window.addEventListener('load' , function() {
})
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、 图像等完全加载
给document添加
例如:监听页面DOM加载完毕
document.addEventListener('DOMContentLoaded' , function() {
})
获取元素内容的总宽高(不包含滚动条)
只读属性
获取元素内容向左滚,向上滚出去看不到的距离。
可以修改
document.documentElement.scrollTop
window.addEventListener('scroll' , function() {
let num = document.documentElement.scrollTop
console.log(num)
})
获取元素的真实宽高、包含元素自身设置的宽高、padding、border
获取元素距离自己定位父级的左、上距离
offsetTop和offsetLeft 得到位置以带有定位的父级为准,如果都没有则以 文档左上角 为准
获取元素的可见部分宽高(不包含边框,滚动条等)
获取左边框和上边框宽度
会在窗口尺寸改变的时候触发事件
// resize事件 : 当浏览器大小发生改变的时候会触发该事件 ==> 可以用于获取页面可视区大小
window.addEventListener('resize' , function () {
let w = document.documentElement.clientWidth
console.log(w)
})
给window注册的事件