文章目录
  1. 1. DOM写法
  2. 2. DOM2写法
  3. 3. 总结

我们以前都是运用dom来操作元素的,但是现在DOM2的出现是非常好的,并且在开发中用的最多的也是Dom2这种写法

DOM写法

1
2
3
xxx.onclick=function(){
alert("我是通过DOM来实现操作的");
}

DOM2写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//注意由于DOM2在底版的游览器他是不支持的,因此我来做下兼容
var Listener={
addListener:function(element,type,fun){//element:对象,type:事件类型,fun:要执行的函数
if(element.addEventListener){ //dom2
element.addEventListener(type,fun,false);
}else if(element.attachEvent){ //IE
element.attachEvent("on"+type,fun);
}
else{
element["on"+type]=fun;//dom
}
},
deListener:function(element,type,fun){ //删除
if(element.removeEventListener){
element.removeEventListener(type,fun,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fun);
}
else{
element["on"+type]=null; //这里运用关联数组的写法
}
}
};

总结

为什么不用第一种的写法,原因是,如果我要在那个元素上面添加两个函数的话,那么我最后的函数会覆盖我前面的函数,这是不好的,而且这样写不够有语法规范,第二种写法很好的解决了第一种写法的诟病,也是我们开发中运用的最多的

文章目录
  1. 1. DOM写法
  2. 2. DOM2写法
  3. 3. 总结