2021-09-24
学如逆水行舟，不进则退
事件冒泡 点击元素之后，事件从下往上触发
事件捕获 点击元素之后，事件从上往下触发
<body>
<div id="box1">
<button type="button1" id="btn1">事件冒泡</button>
</div>
<div id="box2">
<button type="button2" id="btn2">事件捕获</button>
</div>
<script type="text/javascript">
//事件冒泡 先弹出btn再弹出box
var box1=document.getElementById("box1"),
btn1=document.getElementById("btn1");
box1.addEventListener("click",function(){
alert("我是box");
});
btn1.addEventListener("click",function(){
alert("我是btn");
});
//事件捕获 先弹出box再弹出btn
var box2=document.getElementById("box2"),
btn2=document.getElementById("btn2");
box2.addEventListener("click",function(){
alert("我是box");
},true);
btn2.addEventListener("click",function(){
alert("我是btn");
},true);
</script>
</body>
事件委托 利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
<body>
<ul id="parent">
<li id="one">one</li>
<li id="two">two</li>
<li id="three">three</li>
</ul>
<script type="text/javascript">
var parent=document.getElementById("parent");
parent.addEventListener("click",function(event){
if(event.target.id=="one"){
alert("one");
}else if(event.target.id=="two"){
alert("two");
}else if(event.target.id=="three"){
alert("three");
}
});
</script>
</body>