事件处理主要有两种方式,最好使用第2种。
1、设置对象属性
如 window.onload ,该方法各个浏览器都支持,但是每个对象的每种事件都只能注册一个事件处理程序,后注册的会替换之前的。
事件处理程序,都会被传递event参数。IE浏览器并未传递,需要通过全局对象window.event来获取。
function handler(event) {
event = event || window.event;
// other......
}
调用上下文是对象,this指代该对象。
事件处理程序的返回值 (return false),可以影响与该事件关联的浏览器默认行为。
若要阻止事件的传播,使用 event.stopPropagation() 方法阻止事件传播。IE浏览器设置 event.cancelBubble = true 来阻止事件冒泡。
2、调用事件注册方法
浏览器之间并不兼容,但是每种事件可以注册多个事件处理程序。
Dom标准事件模型,使用 addEventListener(), removeEventListener()。该事件模型支持捕获、冒泡两个阶段。并按照注册顺序调用事件处理程序。
IE 浏览器,使用 attachEvent(), detachEvent()。该事件模型不支持捕获,只能冒泡。事件处理程序的调用顺序不能保证。
事件处理程序,都会被传递event参数。
调用上下文是对象,this指代该对象,但IE浏览器的attachEvent是window。
事件处理程序的返回值,使用 event.preventDefault() 方法阻止与该事件关联的浏览器默认行为。IE浏览器设置event.returnValue = false 来阻止。
若要阻止事件的传播,使用 event.stopPropagation() 方法阻止事件传播。IE浏览器设置event.cancelBubble = true 来阻止事件冒泡。
if (element.addEventListener) {
element.addEventListener('click', function(event){
//code here ...
event.preventDefault();
event.stopPropagation();
}, false);
} else if (element.attachEvent) {
element.attachEvent('onclick', function(event){
//code here ...
event.returnValue = false;
event.cancelBubble = true;
});
} else {
//do nothing
}
并不是所有的事件都冒泡,例外的是 scroll, focus, blur, mouseenter, mouseleave 事件。