在js中,事件的写法有三种,这也是件事的兼容。
1.addEventListener
var div=document.querySelector("div");
div.addEventListener("click",clickHandler1);
function clickHandler1(e){
//e.stopPropogation();
console.log(e)
}
div.addEventListener("click",clickHandler2);
function clickHandler2(e){
console.log("bbb")
//this.removeEventListener("click",clickHandler) 删除事件
}
缺点:不支持IE8及以下
优点:支持捕获和冒泡阶段分开侦听
支持事件抛发机制
支持同一个对象且同一个事件做多个事件回调函数,如例中的clickHandler1,clickHandler2都可以执行
事件使用时可以将函数与内容完全分离
1.attachEvent
div.attachEvent("onclick",clickHandler);
function clickHandler(e){
console.log(e);
//div.detachEvent("onclick",clickHandler); 删除事件
}
缺点:IE8以上不支持,没有捕获,不支持一次点击({noce:true}) addEventListener的第四个参数,相当于删除事件,前面的文章中说过。
优点:支持IE8以下,
并且可以同一个对象且同一个事件调用多个回调函数
事件使用时可以将函数与内容完全分离
3.onclick
div.onclick=function(){
console.log("a");
}
div.onclick=function(){
console.log("b");
} //只能打印 b
优点:全浏览器支持,不考虑兼容问题,
代码便捷
缺点:不支持事件抛发机制,只能使用系统默认事件
同一个元素同一个事件不支持多个回调函数
因为代码大量使用匿名函数,容易造成回调地狱,并且在开发中代码实际功能不能分离
上面内容说到了兼容,下面是兼容问题的写法
function addEventListen(elem,type,callback){ //elem是侦听对象,type是事件类型,callback是回调函数 ,删除事件也是这样兼容
try{ //可以不写在函数内,直接 try catch ,我只是习惯了写在函数内
elem.addEventListener(type,callback)
}catch(e){
elem.attachEvent("on"+type,callback);
}
}
事件的兼容问题和事件说了后,就可以说冒泡、捕获和目标了
假设现在有对象A,对象B,对象C,包含顺序是A-->B-->C ,C在最里层,三个对象都设置了侦听,点击C时,执行顺序:
A-->B-->C进入到里层,这是捕获阶段,然后开始执行事件 C-->B-->A 这就是冒泡阶段,找到C就是目标阶段。
在只有一个对象时候,冒泡机制没什么影响,所以不用考虑,但是当对象包含对象时候,就必须要考虑到冒泡。
下面,代码示例
var div0=document.querySelector(".div0");
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
div0.addEventListener("click",div0ClickHandler);
div1.addEventListener("click",div1ClickHandler);
div2.addEventListener("click",div2ClickHandler,true);
function div0ClickHandler(e){
//console.log(e);
console.log(e.currentTarget);//老版本浏览器
}
function div1ClickHandler(e){
console.log(e.currentTarget);
// e.stopPropagation(); //停止冒泡 新版本浏览器用
}
function div2ClickHandler(e){
console.log(e.currentTarget);
}
可以看到,当点击最里面的div2时,打印的时顺序是div2-->div1-->div0 这就是冒泡
当div1加了阻止冒泡后,当点击最里面的div2时,打印的就是 div2-->div1,因为冒泡阻止在div1了
第三个参数如果是true,就是捕获,当点击后,在进去的时候就执行事件,比如div2加了true,不影响,还是div2-->div1-->div0
比如div0加了true,就是div0-->div2-->div1,在进去的时候执行了最外层。
html
<div class="div0">
div0
<div class="div1"> div1
<div class="div2"> div2</div>
</div>
</div>
css
.div0
{
width:200px;
height: 200px;
background-color: aquamarine;
position: relative;
left:0;
right: 0;
margin: auto;
border:1px solid #000000;
}
.div1
{
width: 130px;
height: 130px;
background-color: orange;
position: absolute;
left:0;
right: 0;
top:0;
bottom: 0;
margin: auto;
}
.div2
{
width: 50px;
height: 50px;
background-color: skyblue;
position: absolute;
left:0;
right: 0;
top:0;
bottom: 0;
margin: auto;
}