DOM Event：capture and bubble

最新推荐文章于 2021-11-28 15:30:08 发布

fingding

最新推荐文章于 2021-11-28 15:30:08 发布

阅读量810

点赞数

分类专栏： web 文章标签： function bt button div 360

本文链接：https://blog.csdn.net/fingding/article/details/7227381

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>DOM Event</title>
<style>
#aa {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 10px;
	top: 10px;
	width: 1200px;
	height: 600px;
}
#bb {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 1150px;
	height: 760px;
}
#cc {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 1100px;
	height: 520px;
}
#dd {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 1050px;
	height: 480px;
}
#ee {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 1000px;
	height: 440px;
}
#ff {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 950px;
	height: 400px;
}
#gg {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 900px;
	height: 360px;
}
#hh {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 850px;
	height: 320px;
}
#ii {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 800px;
	height: 280px;
}
#jj {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 750px;
	height: 240px;
}
#kk {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 700px;
	height: 200px;
}
#ll {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 650px;
	height: 160px;
}
#mm {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 600px;
	height: 120px;
}
#nn {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 550px;
	height: 80px;
}
#bt {
	position: absolute;
	border-style:solid;
	border-color:#00ff00;
	left: 20px;
	top: 20px;
	width: 100px;
	height: 30px;
}
</style>
</head>
<body>
<div id="aa">aa
<div id="bb">bb
<div id="cc">cc
<div id="dd">dd
<div id="ee">ee
<div id="ff">ff
<div id="gg">gg
<div id="hh">hh
<div id="ii">ii
<div id="jj">jj
<div id="kk">kk
<div id="ll">ll
<div id="mm">mm
<div id="nn">nn
<input type="button" id="bt" value="hello">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function fooaa(e)
{
	//alert(e.target.parentNode.id);
	alert("aa");
}
function foobb(e)
{
	alert("bb");
}
function foocc(e)
{
	alert("cc");
}
function foodd(e)
{
	alert("dd");
}
function fooee(e)
{
	alert("ee");
}
function fooff(e)
{
	alert("ff");
}
function foogg(e)
{
	alert("gg");
}
function foohh(e)
{
	alert("hh");
}
function fooii(e)
{
	alert("ii");
}
function foojj(e)
{
	alert("jj");
}
function fookk(e)
{
	alert("kk");
}
function fooll(e)
{
	alert("ll");
}
function foomm(e)
{
	alert("mm");
}
function foonn(e)
{
	alert("nn");
}
function foobt(e)
{
	alert("bt");
}
/*
document.getElementById("aa").addEventListener("click",fooaa,true);
document.getElementById("bb").addEventListener("click",foobb,true);
document.getElementById("cc").addEventListener("click",foocc,true);
document.getElementById("dd").addEventListener("click",foodd,true);
document.getElementById("ee").addEventListener("click",fooee,true);
document.getElementById("ff").addEventListener("click",fooff,true);
document.getElementById("gg").addEventListener("click",foogg,true);
document.getElementById("hh").addEventListener("click",foohh,true);
document.getElementById("ii").addEventListener("click",fooii,true);
document.getElementById("jj").addEventListener("click",foojj,true);
document.getElementById("kk").addEventListener("click",fookk,true);
document.getElementById("ll").addEventListener("click",fooll,true);
document.getElementById("mm").addEventListener("click",foomm,true);
document.getElementById("nn").addEventListener("click",foonn,true);
document.getElementById("bt").addEventListener("click",foobt,true);
*/
document.getElementById("aa").addEventListener("click",fooaa,false);
document.getElementById("bb").addEventListener("click",foobb,false);
document.getElementById("cc").addEventListener("click",foocc,false);
document.getElementById("dd").addEventListener("click",foodd,false);
document.getElementById("ee").addEventListener("click",fooee,false);
document.getElementById("ff").addEventListener("click",fooff,false);
document.getElementById("gg").addEventListener("click",foogg,false);
document.getElementById("hh").addEventListener("click",foohh,false);
document.getElementById("ii").addEventListener("click",fooii,false);
document.getElementById("jj").addEventListener("click",foojj,false);
document.getElementById("kk").addEventListener("click",fookk,false);
document.getElementById("ll").addEventListener("click",fooll,false);
document.getElementById("mm").addEventListener("click",foomm,false);
document.getElementById("nn").addEventListener("click",foonn,false);
document.getElementById("bt").addEventListener("click",foobt,false);

function funnn(e)
{
	//e.preventDefault(); // 阻止默认事件发生
	alert("nn->contextmenu");
	return false;
}
function funbt(e)
{
	e.preventDefault();
	alert("bt->contextmenu");
	return false;
}
document.getElementById("nn").addEventListener("contextmenu",funnn,false);
document.getElementById("bt").addEventListener("contextmenu",funbt,false);
</script>

</body>
</html>

切忌写成平行关系：<div id="aa">aa</div><div id="bb">bb</div>

只有在包含关系下，才能实现DOM Eevent的capture和bubble

fingding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM Event：capture and bubble

DOM Event#aa { position: absolute; border-style:solid; border-color:#00ff00; left: 10px; top: 10px; width: 1200px; height: 600px;}#bb { position: absolute; border-style:solid; border-col
复制链接

扫一扫

专栏目录