js day22

一、事件流

1.绑定事件

想要给一个元素绑定事件，我们有两种方法：使用内联事件或事件监听器。在之前的课程中，我们一直使用的是内联事件来为元素绑定事件

按钮1
按钮2
    

//无限制第为元素绑定事件

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

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

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)