标准事件流
<html><body><div><input/><div></body></html>
每个都绑定点击事件=回调函数
每一次鼠标点击input 的流程
捕获:window=>docuemtn=>html=>body=>div=>input
目标:input
冒泡:input=>div=>body=>html=>docuemtn=>window
dom0事件只能在冒泡阶段触发。
默认情况,只在冒泡触发。
通过DOM2的方法捕获
可以通过dom2的方法绑定点击事件,捕获到。
<div id="box2"></div>
box2.addEventListener("click",function(){
console.log("box2,捕获");
},true)
document.body.addEventListener("click",function(){
console.log("body,捕获");
},true)
阻止冒泡事件传播
只执行按钮的点击事件,停止父级元素的执行。
//给按钮绑定点击事件
obutton.onclick = function(evt){
//这个 的父级元素 删除
this.parentNode.remove()
//阻止 冒泡事件传播
evt.stopPropagation()
}
阻止默认行为(return false)
dom0 方法 return false
document.oncontextmenu=function(){
console.log("右键单击.自定义右键菜单");
return false // 阻止事件行为
}
dom2方法 evt.preventDefault()
// dom2 阻止事件行为
document.addEventListener("contextmenu",function(evt){
console.log("右键单击.自定义右键菜单");
evt.preventDefault()
})
自定义菜单案例
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 100px;
padding:10px;
border:1px solid black;
display: none;
position: absolute;
}
ul li:hover{
background: skyblue;
}
</style>
</head>
<body>
<ul id="list">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<script>
document.addEventListener("contextmenu",function(evt){
evt.preventDefault() // 阻止默认行为
var i = document.getElementById("list")
console.log("右键");
i.style.display = "block"
var x = evt.clientX //鼠标右击距离可视窗口左上角的文职。
var y = evt.clientY
//如果X轴 >= html的可视窗口的宽度 - i.触发元素的宽
if(x>=document.documentElement.clientWidth-i.offsetWidth)
x=document.documentElement.clientWidth-i.offsetWidth
//如果Y轴 >= html的可视窗口的高度 - i.触发元素的高
if(y>=document.documentElement.clientHeight-i.offsetHeight)
y=document.documentElement.clientHeight-i.offsetHeight
i.style.left= x+"px"
i.style.top= y+"px"
})
//设置单击事件,把ul列表样式display="none"
document.addEventListener("click",function(){
var i = document.getElementById("list")
i.style.display="none"
})
</script>
</body>