绑定事件
方法一
<div class="box" onclick="fn()"></div>
方法二
var box =document.querySelectorAll(".box")[0]
box.onclick=function(){}
方法三
var box=document.querySelectorAll(".box")[0]
box.addEventListener("click",function(){})
解绑事件
方法一
box.onclick=function(){
console.log(123)
box.onmouseover=null;//解绑
}
box.onmouseover=function(){
console.log(456)
}
方法二
var fn1=function(){
console.log(123)
}
var fn2=function(){
console.log(456)
box.removeEventListener("mouseover",fn1)
}
box.addEventListener("mouseover",fn1)
box.addEventListener("click",fn2)
获取事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelectorAll(".box")[0]
/* box.onclick=function(e){
var e =e || window.event //兼容问题
console.log(e);
console.log(e.type);
} */
box.addEventListener('click',function(e){
var e = e || window.event
console.log(e);
console.log(e.type);
})
box.addEventListener('mouseover',function(e){
var e = e || window.event
console.log(e);
console.log(e.type);
})
</script>
</html>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.big {
width: 500px;
height: 500px;
background-color: aqua;
}
.middle {
width: 300px;
height: 300px;
background-color: chocolate;
}
.small {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="big">
<div class="middle">
<div class="small"></div>
</div>
</div>
</body>
<script>
var big =document.querySelectorAll(".big")[0]
big.onclick=function(){
console.log("big");
}
var middle =document.querySelectorAll(".middle")[0]
middle.onmouseover=function(){
console.log("middle");
}
var small =document.querySelectorAll(".small")[0]
small.onclick=function(){
console.log("small");
}
//事件的传播 ===== 流
//向上查找 同类型的会直接冒泡 ----事件冒泡 -----只会触发同一类型
</script>
</html>
阻止冒泡
在函数里加上
if (e) {
e.stopPropagation()
} else {
e.cancelBubble = true
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.big {
width: 500px;
height: 500px;
background-color: aqua;
}
.middle {
width: 300px;
height: 300px;
background-color: chocolate;
}
.small {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="big">
<div class="middle">
<div class="small"></div>
</div>
</div>
</body>
<script>
var big = document.querySelectorAll(".big")[0]
big.onclick = function () {
console.log("big");
}
var middle = document.querySelectorAll(".middle")[0]
middle.onmouseover = function () {
var e = e || window.event
if (e) {
e.stopPropagation()
} else {
e.cancelBubble = true
}
console.log("middle");
}
var small = document.querySelectorAll(".small")[0]
small.onclick = function () {
var e = e || window.event
if (e) {
e.stopPropagation()
} else {
e.cancelBubble = true
}
console.log("small");
}
//事件的传播 ===== 流
//向上查找 同类型的会直接冒泡 ----事件冒泡 -----只会触发同一类型
</script>
</html>
事件对象的位置信息
client
从浏览器的左上角开始计算位置
box.addEventListener("click",function(e){
var e =e||window.event
console.log(e.clientX,e.clientY)
})
offset
对盒子内容的位置,从盒子内容左上角开始
box.addEventListener("click",function(e){
var e= e||window.event
console.log(e.offsetX,e.offsetY)
})
page
从浏览器的所有内容左上角开始到这个位置
box.addEventListener("click",function(e){
var e =e||window.event
console.log(e.pageX,e.pageY)
})
screen
从屏幕的左上角开始到这个位置
box.addEventListener("click",function(e){
var e=e||window.event
console.log(e.screenX,e.screenY)
})
事件中的鼠标事件
click
按下并释放任意鼠标按键时触发
dblclick
鼠标双击时触发
mouseover
鼠标进入时触发
mouseleave
鼠标离开时触发
mousedown
按下鼠标按键时触发
mouseup
松开鼠标按键时触发
mousemove
鼠标移动时持续触发
事件中的键盘事件
keypress
键盘按键(Shift、Fn、CapsLock等字符集除外)按下时触发
keydown
键盘按下时触发(不松开会一直执行)
keyup
键盘弹起时触发
键盘事件的键盘信息
e.code
e.key 返回按键上的信息
e.keyCode 返回键盘码
document.addEventListener("keydown",function(e){
var e =e||window.event
console.log(e.code)
console.log(e.key)
console.log(e.keyCode)
})