DOM事件处理程序
DOM0级处理程序
1.dom0 事件就是直接通过 onclick 绑定到 html上的事件
例:var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
- 清理dom0 事件时,只需给该事件赋值为 null
input.onclick = null
- 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数
- 不存在兼容性问题
缺点,一个事件处理程序只能对应一个处理函数。
DOM2级事件处理程序
DOM2级事件处理方式指定了,添加事件处理程序和删除事件处理程序的方法。分别是:
addEventListener(eventName,func,isPuhuo);
removeEventListener(eventName,func,isPuhuo);
参数分别是,事件处理属性名称,处理函数,是否在捕获时执行事件处理函数
事件捕获阶段、处于目标阶段和事件冒泡阶段
事件冒泡(IE)
事件最开始最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)
事件捕获(顺序与事件冒泡相反)
不太具体的结点应该更早接收到事件,而最具体的节点最后接收到事件
<span>
<a> </a>
</span>
点击a后capturing(捕捉)阶段事件传播会从document-> span->a,然后发生在a,最后bubbling(冒泡)阶段事件传播会从a->span->document事件冒泡和事件捕获
DOM2级事件处理添加进去的事件,我们可以控制事件的冒泡或是捕获过程。当addEventListener方法的第三个参数为true时,表示只进行事件捕获,不执行事件冒泡,再捕获的过程中,触发途径标签的对应事件函数。当第三个参数为false,表示执行事件冒泡的过程(默认情况)
例如:
var btn = document.getElementById("btn");
handler = function(){
……
}
addEventListener("click",handler,false/true);
removeEventListener("click",handler,false/true);
- eventName的值==均不含on==,例如注册鼠标点击事件eventName为==“click”==
- 处理函数中的this依然指的是指当前dom元素
通过addEventListener添加的事件处理程序,只能通过removeEventListener来删除,也就是说通过addEventListener添加的匿名函数将无法被删除。
IE中的DOM2级事件处理
IE中的DOM2级事件处理使用了==attachEvent==和==detachEvent==来实现。这俩个方法接受俩个相同的参数,事件处理名称和事件处理函数。IE8级更早版本只支持冒泡型事件,所以attachEvent添加的事件都会被添加到冒泡阶段。
例如:
var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){
alert(this);//此处this是window
});
- ==注意==;通过attachEvent添加的事件第一个参数是==“onclick”==而非标准事件中的“click”。
在使用attachEvent方法和DOM0级事件处理程序的主要区别在于事件处理程序的作用域。采用DOM0级处理方式,事件处理程序会在其所属元素的作用域内运行。使用attachEvent,事件处理程序会在全局作用域内运行,因此this等于window。
跨浏览器的事件处理方式:
var EventUtil = {
addEventHandler:function(element,type.handler){
if(element.addEventListener){
element.addEventListener(type,handler);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler);
}else{
element["on" + type] = handler;//" . "与[]是同种用法
}
},
removeEventHandler:function(element,type,handler){
if(element.addEventListener){
element.removeEventListener(type,handler);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler);
}else{
element["on"+type] = null;
}
}
}
DOM3级事件处理程序
DOM浏览器中可能发生的事件有很多种,不同事件类型具有不同的信息,DOM3级事件规定了一下几种事件:
- UI事件,当用户与页面上的元素交互时触发;
- 焦点事件,当元素获得或者失去焦点时触发;
- 鼠标事件,当用户通过鼠标在页面上执行操作时触发;
- 滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
- 文本事件,当在文档中,输入文本时触发;
- 键盘事件,当用户通过键盘在页面上执行操作时触发;
- 合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;
- 变动事件,当底层Dom结构发生变化时触发;
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件,IE9也支持DOM3级事件。
DOM中的事件模拟(自定义事件):
DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent()方法接收如下四个参数。
1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
2)bubble(布尔值):标示事件是否应该冒泡;
3)cancelable(布尔值):标示事件是否可以取消;
4)detail(对象):任意值,保存在event对象的detail属性中;
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:
var div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
alert("div myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
var e = document.createEvent("CustomEvent");
e.initCustomEvent("myEvent",true,false,"hello world!");
div.dispatchEvent(e);
}
这个例子中==创建了一个冒泡事件“myEvent”==。而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时,浏览器会将该事件冒泡到document。
IE中的事件模拟(IE8及之前版本中):
与DOM中事件模拟的思路类似,先创建event对象,再为其指定相应信息,然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
例如:
var btn = document.getElementById("myBtn");
创建事件对象,不接受任何参数,结果会返回一个通用的event对象,你必须为该event对象指定所有必要的信息。
var event = document.createEventObject();
//初始化事件对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY =0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//触发事件
btn.fireEvent("onclick",event);
这里顺便补充下事件对象
DOM事件对象
在触发DOM上的事件时都会产生一个对象,
即知道触发的是按钮还是鼠标这些 ,用event / ev /e (看个人习惯)
DOM中的事件对象 (常用的属性和方法)
- type属性,用于获取事件类型 (onclick)
- target属性,用于获取事件目标
- stopPropagation()方法,用于阻止事件冒泡
- preventDefault()方法 阻止事件的默认行为
例如默认的页面跳转,可以阻止它页面的跳转
<a href=" #:">超链接</a>
IE事件对象(常用的4个属性)
- type属性 用于获取事件类型
- srcElement属性 用于获取事件的目标
- cancelBulle属性 用于阻止事件冒泡 不是方法 设置为true为阻止冒泡,false表示不阻止冒泡
- returnValue属性,用于阻止事件的默认行为 false表示阻止事件的默认行为
getType: function(event){
return event.type;
},
getElement: function(event){
return event.target || event.srcElement;
},
getEvent:function(event){
return event? event: window.event; //IE的不同
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
},
preventDefault: function(event){
if(event.preventDefault){ //先判断属性,不加括号
event.preventDefault(); //再使用方法,加括号
}
else{
event.returnValue = false;
}
}
}
调用
eventUtil.addHandler(btn2,'click',function(event){
e = eventUtil.getEvent(event);//!!不要忘记先跨浏览器获取event
alert(eventUtil.getType(e));
eventUtil.stopPropagation(e);
});