DOM事件详解

之前有的地方也使用了事件，但没有系统的总结过，现在把有关事件的内容都总结出来啦！

事件

测试事件参数

事件参数：为元素注册事件，在事件的处理函数中使用arguments.length的方式来获取事件中是否有参数：1个，所以，可以自己在注册事件的时候，向事件的处理的函数中传入一个参数。IE8中是没有这个参数的，只能使用window.event。

事件注册

模拟多人开发为同一个元素注册多个事件

对象.on+事件名字=匿名函数;

my$("btn").onclick=function(){};

对象.addEventListener(事件的名字,事件处理函数,false);

my$("btn").addEventListener("click",function () {console.log("1")},false);

谷歌、火狐支持，IE8不支持。

对象.attachEvent(事件的名字,事件处理函数);

my$("btn").attachEvent("onclick",function () {console.log("3");});

谷歌不支持，IE8支持。

兼容代码

function addEventListener(element,eventName,fn) {
if(element.addEventListener){//浏览器支持这个方法
element.addEventListener(eventName,fn,false);
}else if(element.attachEvent){//浏览器支持这个方法
element.attachEvent("on"+eventName,fn);
}else{
//浏览器都不支持上面的方式
element["on"+eventName]=fn;
}
}

addEventListener方法的第三个参数:是布尔类型

如果第三个参数的值为:false则表示的是事件冒泡(常用)

如果第三个参数的值为:true则表示的是事件捕获(不怎用)

移除事件

对象.on+事件的名字=null

对象.removeListener(事件的名字,事件处理函数,false)

对象.detachEvent(on+事件的名字,事件处理函数)

兼容代码

function removeEventListener(element,eventName,fn) {
if(element.removeEventListener){
element.removeEventListener(eventName,fn,false);
}else if(element.detachEvent){
element.detachEvent("on"+eventName,fn);
}else {
element["on"+eventName]=null;
}
}

注意

注册事件用什么方法，移除事件就用什么方法。

对象.innerHTML='';此方法虽然去掉层中所有的内容了，但注册的事件没有移除掉。

addListener和attachEvent区别

方法名不同

参数个数不同

第一个方式事件无on,第二个有on

第一个方式火狐、谷歌支持，第二个IE8支持，IE11不支持了

第一个方式输出的是正序，第二个是倒序

第一个方式里的this是触发这个事件的对象，第二个方式里的this是windows对象(函数全局作用域下运行)

事件冒泡

A元素中有一个B元素,A元素和B元素注册了相同的事件,如果B元素的事件触发了,那么A元素的事件也会被触发。

阻止事件冒泡：如果用户点击了最里面的层,其他层的事件不再执行

阻止事件冒泡的写法:浏览器之间写法不一样

function(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}

事件捕获

事件冒泡:从里到外,依次被触发

事件捕获:从外到里.依次被触发

几乎不用事件捕获,都是在用事件冒泡

事件的三个阶段

事件捕获阶段，事件目标阶段，事件冒泡阶段

事件一般情况 ，只有两个会一起出现：捕获和目标，冒泡和目标

e.eventPhase可以把事件的阶段显示出来(数字类型)

e.type是事件的类型(事件的名字)

function handle(e) {
switch (e.type){
case "click":console.log("我被点了");break;
case "mouseover":this.style.backgroundColor="red";break;
case "mouseout":this.style.backgroundColor="";break;
}
}

事件源

在事件冒泡中,谁最先触发的这个事件

获取事件源对象的方式:

e.target,谷歌和火狐都支持

window.event.srcElement,IE8浏览器支持

当前触发事件的对象:e.currentTarget

注意

如果事件中没有添加处理函数，那么输出是null,null返回的类型是object。

e.button可以输出是鼠标左键、中华轮还是右键。

e.keyCode可以输出按下的键盘上的键对应的值，IE8使用event.keyCode获取。

escape可以把中文变成对应的编码，unescape可以把中文变成对应的编码。

in运算符

语法：属性名字 in 对象

返回值是boolean类型

eg:"name" in obj

delete运算符

把属性从obj中删除

delete obj.name

阻止默认行为

W3C：e.preventDefault()

IE :window.event.returnValue=false

总结了事件的注册、移除，以及相应的事件冒泡和事件捕获、事件源等知识，如果本文有什么错误，欢迎留言指正。