web前端培训教程：IE 事件处理函数

IE 事件处理函数

IE 实现了与 DOM 中类似的两个方法： attachEvent()和 detachEvent()。这两个方法接受相同的参数：事件名称和函数。

在使用这两组函数的时候，先把区别说一下： 1.IE 不支持捕获，只支持冒泡； 2.IE 添加事件不能屏蔽重复的函数； 3.IE 中的 this 指向的是 window 而不是 DOM 对象。 4.在传统事件上， IE 是无法接受到 event 对象的，但使用了 attchEvent()却可以，但有些区别。

window.attachEvent('', function () {

var box = document.getElementById('box');

box.attachEvent('onclick', toBlue);

});

function toRed() {

var that = window.event.srcElement;

that.className = 'red';

that.detachEvent('onclick', toRed);

that.attachEvent('onclick', toBlue);

}

function toBlue() {

var that = window.event.srcElement;

that.className = 'blue';

that.detachEvent('onclick', toBlue);

that.attachEvent('onclick', toRed);

}

PS： IE 不支持捕获，无解。 IE 不能屏蔽，需要单独扩展或者自定义事件处理。 IE 不能传递 this，可以 call 过去。

window.attachEvent('', function () {

var box = document.getElementById('box');

box.attachEvent('onclick', function () {

alert(this === window); //this 指向的 window

});

});

window.attachEvent('', function () {

var box = document.getElementById('box');

box.attachEvent('onclick', function () {

toBlue.call(box); //把 this 直接 call 过去

});

});

function toThis() {

alert(this.tagName);

}

在传统绑定上， IE 是无法像 W3C 那样通过传参接受 event 对象，但如果使用了attachEvent()却可以。

box.onclick = function (evt) {

alert(evt); //undefined

}

box.attachEvent('onclick', function (evt) {

alert(evt); //object

alert(evt.type); //click

});

box.attachEvent('onclick', function (evt) {

alert(evt.srcElement === box); //true

alert(window.event.srcElement === box); //true

});

最后，为了让 IE 和 W3C 可以兼容这个事件切换器，我们可以写成如下方式：

function addEvent(obj, type, fn) { //添加事件兼容

if (obj.addEventListener) {

obj.addEventListener(type, fn);

} else if (obj.attachEvent) {

obj.attachEvent('on' + type, fn);

}

}

function removeEvent(obj, type, fn) { //移除事件兼容

if (obj.removeEventListener) {

obj.removeEventListener(type, fn);

} else if (obj.detachEvent) {

obj.detachEvent('on' + type, fn);

}

}

function getTarget(evt) { //得到事件目标

if (evt.target) {

return evt.target;

} else if (window.event.srcElement) {

return window.event.srcElement;

}

}

PS：调用忽略， IE 兼容的事件，如果要传递 this，改成 call 即可。

PS： IE 中的事件绑定函数 attachEvent()和 detachEvent()可能在实践中不去使用，有几个

原因： 1.IE9 就将全面支持 W3C 中的事件绑定函数； 2.IE 的事件绑定函数无法传递 this； 3.IE的事件绑定函数不支持捕获； 4.同一个函数注册绑定后，没有屏蔽掉； 5.有内存泄漏的问题。至于怎么替代，我们将在以后的项目课程中探讨。

事件对象的其他补充

在 W3C 提供了一个属性： relatedTarget；这个属性可以在 mouseover 和 mouseout 事件中获取从哪里移入和从哪里移出的 DOM 对象。

box.onmouseover = function (evt) { //鼠标移入 box

alert(evt.relatedTarget); //获取移入 box 最近的那个元素对象

} //span

box.onmouseout = function (evt) { //鼠标移出 box

alert(evt.relatedTarget); //获取移出 box 最近的那个元素对象

} //span

IE 提供了两组分别用于移入移出的属性： fromElement 和 toElement，分别对应 mouseover

和 mouseout。

box.onmouseover = function (evt) { //鼠标移入 box

alert(window.event.fromElement.tagName); //获取移入 box 最近的那个元素对象 span

}

box.onmouseout = function (evt) { //鼠标移入 box

alert(window.event.toElement.tagName); //获取移入 box 最近的那个元素对象 span

}

PS： fromElement 和 toElement 如果分别对应相反的鼠标事件，没有任何意义。

剩下要做的就是跨浏览器兼容操作：

function getTarget(evt) {

var e = evt || window.event; //得到事件对象

if (e.srcElement) { //如果支持 srcElement，表示 IE

if (e.type == 'mouseover') { //如果是 over

return e.fromElement; //就使用 from

} else if (e.type == 'mouseout') { //如果是 out

return e.toElement; //就使用 to

}

} else if (e.relatedTarget) { //如果支持 relatedTarget，表示 W3C

return e.relatedTarget;

}

}

有时我们需要阻止事件的默认行为，比如：一个超链接的默认行为就点击然后跳转到指定的页面。那么阻止默认行为就可以屏蔽跳转的这种操作，而实现自定义操作。

取消事件默认行为还有一种不规范的做法，就是返回 false。

link.onclick = function () {

alert('Lee');

return false; //直接给个假，就不会跳转了。

};

PS：虽然 return false；可以实现这个功能，但有漏洞；第一：必须写到最后，这样导致中间的代码执行后，有可能执行不到 return false；第二： return false 写到最前那么之后的自定义操作就失效了。所以，最好的方法应该是在最前面就阻止默认行为，并且后面还能执行代码。

link.onclick = function (evt) {

evt.preventDefault(); //W3C，阻止默认行为，放哪里都可以

alert('Lee');

};

link.onclick = function (evt) { //IE，阻止默认行为

window.event.returnValue = false;

alert('Lee');

};

跨浏览器兼容

function preDef(evt) {

var e = evt || window.event;

if (e.preventDefault) {

e.preventDefault();

} else {

e.returnValue = false;

}

}

上下文菜单事件： contextmenu，当我们右击网页的时候，会自动出现 windows 自带的菜单。那么我们可以使用 contextmenu 事件来修改我们指定的菜单，但前提是把右击的默认行为取消掉。

addEvent(window, 'load', function () {

var text = document.getElementById('text');

addEvent(text, 'contextmenu', function (evt) {

var e = evt || window.event;

preDef(e);

var menu = document.getElementById('menu');

menu.style.left = e.clientX + 'px';

menu.style.top = e.clientY + 'px';

menu.style.visibility = 'visible';

addEvent(document, 'click', function () {

document.getElementById('myMenu').style.visibility = 'hidden';

});

});

});

PS： contextmenu 事件很常用，这直接导致浏览器兼容性较为稳定。

卸载前事件： beforeunload，这个事件可以帮助在离开本页的时候给出相应的提示， “离开” 或者“返回” 操作。

addEvent(window, 'beforeunload', function (evt) {

preDef(evt);

});

鼠标滚轮(mousewheel)和 DOMMouseScroll，用于获取鼠标上下滚轮的距离。

addEvent(document, 'mousewheel', function (evt) { //非火狐

alert(getWD(evt));

});

addEvent(document, 'DOMMouseScroll', function (evt) { //火狐

alert(getWD(evt));

});

function getWD(evt) {

var e = evt || window.event;

if (e.wheelDelta) {

return e.wheelDelta;

} else if (e.detail) {

return -evt.detail * 30; //保持计算的统一

}

}

PS：通过浏览器检测可以确定火狐只执行 DOMMouseScroll。

DOMContentLoaded 事件和 readystatechange 事件，有关 DOM 加载方面的事件，关于这两个事件的内容非常多且繁杂，我们先点明在这里，在项目课程中使用的时候详细讨论。