事件流
嵌套元素触发同类型事件的顺序
事件流阶段
冒泡:从目标元素逐层向上触发事件直至docment顶部结束。
捕获:从文档docment元素逐层向下触发事件直至触发元素
有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave
事件对象(event
每个事件处理函数都有接受一个event参数,该参数是一个对象保存当前事件的一些属性和方法。
如:比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
<body>
<div class="box">
<p>我是大盒子中的p</p>
</div>
</body>
<script>
let box = document.querySelector('.box')
box.addEventListener('click', function (e) {
// 1. 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
// 2. 在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。
let e = e || window.event
console.log(e.type)
console.log(e.target, 'e.target')
console.log(this, 'this')
})
</script>
阻止事件冒泡
e.stopPropagation()
兼容性写法
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
阻止事件默认行为
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不
执行了, 而且只限于传统的注册方式
return false;
alert(11);
}
事件委托
下面的案例点击li时li变色,非委托需要给每个li注册点击事件实现;事件委托只需事件绑定给父级通过点击自级冒泡相应到父级。
// 非委托
let liArr = document.querySelectorAll("li")
for (let i of liArr) {
i.addEventListener("click", function () {
i.style.backgroundColor = 'pink'
})
}
// 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'pink'
})
鼠标常用事件
client 相对浏览器可视区域
screen相对真个浏览器
page相对浏览器可视区域 + 被卷曲的头部区域
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.neirong {
width: 600px;
height: 400px;
border: 1px solid red;
}
.test {
width: 200px;
height: 200px;
border: 1px solid red;
}
.shan {
background-color: palegoldenrod;
height: 1200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="shan"></div>
<div class="neirong"></div>
<div class="test">
</div>
</body>
<script>
let test = document.querySelector(".test")
let neirong = document.querySelector(".neirong")
document.addEventListener('mousemove', function (e) {
neirong.innerHTML = `
<p>
<span>clientX:相对浏览器可视内容区域</span>
<span>clientX:${e.clientX}</span>
<span>clientY:${e.clientY}</span>
</br>
<p>
<p>
<span>screenX:相对设备屏幕区域</span>
<span>screenX:${e.screenX}</span>
<span>screenY:${e.screenY}</span>
</br>
<p>
<p>
<span>pageX:相对设备屏幕区域</span>
<span>pageX:${e.pageX}</span>
<span>pageY:${e.pageY}</span>
</br>
<p>
`
})
</script>
</html>
键盘常用事件
京东输入框放大demo
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.PlussDH {
display: none;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>公司名称: <input type="text" name="kdmc" id=""><input type="text" name="PlussDH" id="" class="PlussDH"></p>
<p>快递单号: <input type="text" name="danhao" id=""></p>
</div>
</body>
<script>
let kdmc = document.querySelector("[name=kdmc]")
let dh = document.querySelector("[name=danhao]")
let PlussDH = document.querySelector("[name=PlussDH]")
dh.addEventListener('keyup', function (e) {
kdmc.style.display = 'none'
PlussDH.value = dh.value
if (!PlussDH.value) {
kdmc.style.display = 'inline-block'
PlussDH.style.display = 'none'
} else {
PlussDH.style.display = 'inline-block'
}
})
dh.addEventListener('blur', function () {
kdmc.style.display = 'inline-block'
PlussDH.style.display = 'none'
})
dh.addEventListener('focus', function () {
kdmc.style.display = 'none'
PlussDH.style.display = 'inline-block'
})
</script>
</html>