<!DOCTYPE HTML>
<html lang = 'en'>
<head>
<meta charset = 'UTF-8'/>
<title>Document1</title>
<style>
.a{
width:200px;
height:200px;
background-color:red;
}
.b{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div class = 'a'>
<div class = 'b'></div>
</div>
<script>
var a = document.getElementsByTagName('div')[0];
var b = document.getElementsByTagName('div')[1];
//这后面的false代表是否冒泡
//addEventListener('click', foo, false);
//b.addEventListener('click', foo2, false);
//a.addEventListener('click', foo2, false)
//移除事件监听器
//a.removeEventListener('click', foo);
//ie里面的写法
//a.attachEvent('onclick', foo);
//a.detachEvent('onclick', foo);
/*function foo(){
console.log('a');
}
function foo2(e){
var evt = e || event;
console.log('a2');
evt.cancelBubble = true;
}*/
//Dom2级事件处理程序利用添加事件监听器能同时给一个dom元素添加
//两个程序，并且可以同时执行
//而普通的dom元素值可以执行一个事件，并且后面一个事件覆盖前面一个事件
/*a.onclick = function(){
console.log('a');
}
a.onclick = function(){
console.log('a2');
}*/
//兼容性写法
//obj : 事件绑定在谁身上 type ： 事件名称 fun具体的函数
function adEvent(obj, type, fun){
if(obj.addEventListener){
obj.addEventListener(type, fun, false);
}else{
obj.attachEvent('on' + type, fun);
}
}
function removeEvent(obj, type, fun){
if(obj.removeEventListener){
obj.removeEventListener(type, fun)
}else{
obj.detachEvent('on' + 'type', fun)
}
}
adEvent(a,'click', foo);
removeEvent(a, 'click', foo);
function foo(){
console.log('ok')
}
</script>
</body>
</html>
DOM2级事件处理程序详解以及兼容性写法
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/108244446
今日推荐
周排行