on事件
function fn1(){alert(1)};
function fn2(){alert(2)};
document.onclick=fn1();
document.onclick=fn2();
只會彈出2
- 使用on事件，給標簽加多個事件的時候后面的會覆蓋前面的。
function fn1(){alert(1)};
function fn2(){alert(2)};
document.addEventListener('onclick',fn1()); //1
document.addEventListener('onclick',fn2()); //2
.addEvent事件監(jiān)聽可以給一個標簽添加多個事件,并且之前的不會被覆蓋掉
- addevent里面可以傳遞三個參數：
- 1.addevent 里面的參數,第一個是傳入對應的事件的類型(注意不要加on)
- 2.addevent 第二個參數,就是函數的回調
- 3.bool類型取值,如果是false(默認就是),事件的觸發(fā)機制就會按照冒泡(從下往上),如果是true,就會按照事件捕獲,從上往下
例如：
<style>
.div1{
width: 300px;
height: 300px;
background: red;
margin: 100px auto; }
.div2{
width: 200px;
height: 200px;
background: blue; }
.div3{
width: 100px;
height: 100px;
background: green;
}
</style>
<script>
window.onload=function(){
div1.addEventListener("click",function(){
alert(1);
} ,false);
div1.addEventListener("click",function(){
alert(2)
} ,true);
div3.addEventListener("click",function(){
alert(3)
} ,false);
}
</script>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
給div1，div3 添加點擊事件，依次彈出2,3,1
1. div1.addEventListener("click",function(){
alert(1);
} ,false);
2. div1.addEventListener("click",function(){
alert(2)
} ,true);
3.div3.addEventListener("click",function(){
alert(3)
} ,false);
分析代碼：從上往上看代碼，點擊div1, 有一個事件進來，為false所以沒反映，不會彈；第二段代碼中為true，div1捕獲到事件彈出2；第三段代碼，false同樣沒反應。 事件出去觸發(fā)第三段代碼，彈出3；接著往上走，走到第一段代碼彈出1
- false：冒泡，就是如果有一個出去的事件觸發(fā)了你，你就去執(zhí)行這個函數
- true： 捕獲，如果有一個進來的事件觸發(fā)了你，你就去執(zhí)行這個函數
11.png
