Dan*_*llo 12
该addEventListener方法是将事件处理程序附加到元素的W3C标准方法,以便您可以在触发事件时执行一些有用的操作.以下示例将在my_image_id单击具有id的元素时弹出警报消息:
function doSomething() {
alert('Image clicked');
}
var myImage = document.getElementById('my_image_id');
myImage.addEventListener('click', doSomething, false);
不幸的是,这在Internet Explorer中不起作用,因为Microsoft使用不同的事件注册模型.在Internet Explorer 5+中,您必须按如下方式附加事件处理程序:
myImage.attachEvent('onclick', doSomething);
因此,对于跨浏览器事件注册方法,您可以使用反射并有条件地执行:
function addEventHandler(node, type, f) {
if (node.addEventListener) {
node.addEventListener(type, f, false);
}
else if (node.attachEvent) {
node.attachEvent("on" + type, f);
}
else {
node["on" + type] = f;
}
}
var myImage = document.getElementById('my_image_id');
addEventHandler(myImage, 'click', doSomething);
进一步阅读:
您可能熟悉添加这样的事件处理程序:
window.onload = function() {
alert('onload event!');
};
甚至是像这样的HTML:
<body onload="alert('onload event!')">
嗯,这样做的缺点是你只能有一个事件处理程序.因此,如果稍后其他内容覆盖了"onload"属性,则不再使用先前的事件处理程序.
addEventListener是一种注册事件处理程序而不会覆盖前一个事件处理程序的方法.它受Internet Explorer以外的大多数浏览器的支持.不过不用担心,因为Internet Explorer有自己的等价物:attachEvent.
这是他们使用的(简化)示例:
if (myelement.addEventListener) {
// other browsers
myelement.addEventListener(eventname, callback, false);
}
else {
myelement.attachEvent("on"+eventname, callback);
}
使用addEventListener或attachEvent方法注册事件通常比onload/onsomething属性更好,因为它不会破坏同一页面中的任何其他Javascript代码.
| 归档时间： |
|
| 查看次数： |
21752 次 |
| 最近记录： |