一、事件流
1.绑定事件
想要给一个元素绑定事件，我们有两种方法：使用内联事件或事件监听器。在之前的课程中，我们一直使用的是内联事件来为元素绑定事件
<button id='btn1'>按钮1</button>
<button id='btn2'>按钮2</button>
<script type="text/javascript">
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
1)内联事件
btn1.onclick=function(){
alert(1111);
}
//无限制第为元素绑定事件
btn1.onclick=function(){
alert('btn1,第一次绑定');
}
btn1.onclick=function(){
alert('btn1,第二次绑定');
}
2)事件监听
btn2.addEventListener('click',function(){
alert(2222);
})
</script>
//无限制第为元素绑定事件
btn2.addEventListener('click',function(){
alert('btn2,第一次绑定');
})
btn2.addEventListener('click',function(){
alert('btn2,第二次绑定');
})
二、事件冒泡与事件捕获
1.事件冒泡
css样式
*{
margin:0;
padding:0;
}
#div1{
width:300px;
height:300px;
background: #f00;
line-height: 300px;
}
#div2{
width:200px;
height:200px;
background: #f0f;
line-height: 200px;
}
#div3{
width:100px;
height:100px;
background: #0ff;
}
div
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>
script
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
div1.addEventListener('click',function(){
console.log('我是div1');
})
div2.addEventListener('click',function(){
console.log('我是div2');
})
div3.addEventListener('click',function(){
console.log('我是div3');
})
2.事件捕捕获
css样式
*{
margin:0;
padding:0;
}
#div1{
width:300px;
height:300px;
background: #f00;
line-height: 300px;
}
#div2{
width:200px;
height:200px;
background: #f0f;
line-height: 200px;
}
#div3{
width:100px;
height:100px;
background: #0ff;
}
div
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>
script
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
div1.addEventListener('click',function(){
console.log('我是div1');
},true)
div2.addEventListener('click',function(){
console.log('我是div2');
},true)
div3.addEventListener('click',function(){
console.log('我是div3');
},true)
