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事件监听可以给一个标签添加多个事件,并且之前的不会被覆盖掉
- addevent里面可以传递三个参数：
- 1.addevent 里面的参数,第一个是传入对应的事件的类型(注意不要加on)
- 2.addevent 第二个参数,就是函数的回调
- 3.bool类型取值,如果是false(默认就是),事件的触发机制就会按照冒泡(从下往上),如果是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同样没反应。 事件出去触发第三段代码，弹出3；接着往上走，走到第一段代码弹出1
- false：冒泡，就是如果有一个出去的事件触发了你，你就去执行这个函数
- true： 捕获，如果有一个进来的事件触发了你，你就去执行这个函数
11.png
