元素.addEventListener(‘事件类型’,事件处理函数,冒泡还是捕获)不写on
元素.attachEvent(‘事件类型’,事件处理函数)要写on
元素.removeEventListener(事件类型,处理函数):不支持IE9以下的浏览器
元素.detachEvent(事件类型,处理函数):只支持IE9以下的浏览器
if(div1.attachEvent){
//只支持IE9以下的浏览器
div1.attachEvent("onclick",fn1)
div1.attachEvent("onclick",fn2)
div1.attachEvent("onclick",fn3)
//注:输出结果是fn1 fn2 fn3
}else{
//在非IE7 8 执行
div1.addEventListener("click",fn1)
div1.addEventListener("click",fn2)
div1.addEventListener("mouseover",fn3)
}
//输出结果是:fn3 fn2 fn1
两者的区别:
- 参数的个数不同:addEventListener有3个参数,attachEvent有2个
- 事件类型的书写不同
- 执行顺序不同:有多个addEventListener时,是从上往下执行;attachEvent则相反
- 执行的浏览器不同:attachEvent只在IE7 IE8执行
事件传播、阻止事件传播案例:
<style>
div{
width: 500px;
height: 500px;
background-color: pink;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
}
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<div>
<p>
<span></span>
</p>
</div>
<script>
//获取操作对象
var div1=document.querySelector("div")
var p1=document.querySelector("p")
var span=document.querySelector("span")
//分别给以上操作对象绑定点击事件
// div1.onclick=fn1
// p1.onclick=fn2
// span.onclick=fn3
div1.addEventListener?div1.addEventListener("click",fn1,false):div1.attachEvent('onclick',fn1)
if(p1.addEventListener){
//false表示冒泡
p1.addEventListener("click",fn2,false)
}else{
p1.attachEvent("onclick",fn2)
}
if(span.addEventListener){
span.addEventListener("click",fn3,false)
}else{
span.attachEvent("onclick",fn3)
}
function fn1(){
console.log('hello')
}
function fn2(e){
var e = e || window.event
console.log("world")
//阻止事件传播
e.stopPropagation?e.stopPropagation():e.cancelBubble=true
}
function fn3(e){
var e = e || window.event
console.log("大家好")
//阻止事件传播
e.stopPropagation?e.stopPropagation():e.cancelBubble=true
}
</script>