<!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>
.demo{
width: 200px;
height:200px ;
font-size: 20px;
background-color: rebeccapurple;
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<button class="btn">demo</button>
</div>
<script>
// 普通绑定情况下，前面的会被后面的覆盖
// addEventListener添加一个绑定事件，可以重复绑定，不会被覆盖
// 事件冒泡是从外面往里面走
// 事件捕获是从里面网外面走
//onmouseout onmouseover是进过当前的那个对象
// onmouseleave onmouseenter是经过当前的那个范围
let demo=document.querySelector('.demo')
let btn=document.querySelector('.btn')
demo.oncontextmenu=function(e){右击触发菜单
e.preventDefault();
阻止默认行为
let menu=document.querySelector('.menu')
if (menu) {
menu.remove()
menu=document.createElement('div')
menu.classList.add('menu')
document.style.left=e.pageX+'px'
document.style.top=e.pageY+'px'
}
}
demo.onmouseenter=function(){
console.log("移入");
}
demo.onmouseleave=function(){
console.log("移出");
}
demo.onmouseover=function(){
console.log("移出");
}
demo.onmouseout=function(){
console.log("移出");
}
demo.onclick=function(){
console.log(111);
}
demo.onclick=function(){
console.log(222);
}
当重复绑定事件时，怎么避免前面的被后面的覆盖？（添加事件addEventListener）
btn.addEventListener('click',function (e) {
e.stopPropagation()阻止冒泡
console.log(11111);
})
demo.addEventListener('click',function () {
console.log(22222);
})
document.body.addEventListener('click',function () {
console.log(333333);
})
</script>
</body>
</html>
