事件
事件是dom(文档对象模型)的一部分。事件流就是事件发生顺序,这是ie和其他浏览器在事件支持上的主要差别。
一、事件流
1、冒泡型事件
ie上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。
过程:按照dom的层次结构像水泡一样不断上升至顶端。(从里面的div触发事件再到body,到html最后直到document最顶端)。
2、捕获型事件
可以说跟冒泡是正好相反的,事件从最不精确的对象开始触发,然后直到最精确。
3、dom事件流
dom同时支持以上两种事件模型,其中捕获型事件先发生,从document对象开始,最后在document对象结束。
二、事件监听函数
1、ie
每个函数和window对象都有两个方法:
attachevent()方法:附加事件处理函数
[object].attachevent(“事件名”,处理函数fnhandler);
该方法有两个参数。
var fnclick = function() {
alert(你点击了id为div1的div);
}
var odiv = document.getelementbyid(div1);
odiv.attachevent(onclick, fnclick);
可以附加多个处理函数。
detachevent()方法:分离移除事件处理函数
2、dom
addeventlistener()方法:分配附加事件处理函数
[object]. addeventlistener (“事件名”,处理函数fnhandler,boolean);
该方法有三个参数(“事件名”,“分配的函数”,处理函数是冒泡阶段还是捕获阶段)
如果事件处理函数是用于捕获阶段,则第三个参数是true,用于冒泡阶段则为false
var fnclick = function() {
alert(clicked!);
}
var odiv = document.getelementbyid(div);
odiv.addeventlistener(click, fnclick, false);
odiv.removeeventlistener(click, fnclick, false);
可以附加多个处理函数。
removeeventlistener()方法:移除事件处理函数
三、事件对象
包含三个方面的信息:
1、引起事件的对象:ie中就是window.event,dom中是处理函数的为唯一参数;
2、事件发生时的鼠标信息;
3、事件发生时的键盘信息。
ie事件对象
在ie中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:
odiv.onclick = function() { var oevent = window.event; }odiv.onclick = function(){ var oevent = window.event;}
尽管是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。
dom标准的事件对象
event对象必须作为唯一的参数传给事件处理函数。所以,在dom兼容的浏览器(如mozilla,safari和opera)中访问事件对象,要这么做:
odiv.onclick = function() {
var oevent = arguments[0];
}
//也可以这样
odiv.onclick = function(oevent) {
//.....
}