一、事件流
1.綁定事件
想要給一個(gè)元素綁定事件，我們有兩種方法：使用內(nèi)聯(lián)事件或事件監(jiān)聽器。在之前的課程中，我們一直使用的是內(nèi)聯(lián)事件來為元素綁定事件
<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)內(nèi)聯(lián)事件
btn1.onclick=function(){
? ? alert(1111);
}
//無限制第為元素綁定事件
btn1.onclick=function(){
? ? alert('btn1,第一次綁定');
}
? ? btn1.onclick=function(){
? ? ? ? alert('btn1,第二次綁定');
}
2)事件監(jiān)聽
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)
