23

一、事件流

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)