本文总结 JavaScript 跨浏览器开发中的事件处理经验。对比简单与高级事件模型，提供 IE 与标准 DOM 的注册移除方案。详解 a 标签 onclick 与 href 执行顺序及阻止默认行为的方法，解析 onload 加载时机与 onchange 的焦点触发限制，并给出获取事件对象的跨浏览器兼容写法。
简单与高级事件模型对比
事件处理主要包含简单事件模型与高级事件模型两种形式。
代码如下:
<div onclick="alert(this.innerHTML);">
element.onclick = function(){alert(this.innerHTML);}对于 click、mouseover 等常规事件，只要不涉及浏览器特有实现，通常可直接通过上述方式在各浏览器中运行。
然而，当需要为一个元素绑定多个监听器，或需动态添加/移除监听时，简单模型便力不从心。此时必须采用高级事件模型，且 IE 与其他浏览器在此模型上的实现存在差异：
代码如下:
//注册
function addEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.attachEvent('on' + evtName, callback);
}
}
//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.dettachEvent('on' + evtName, callback);
}
} 标签中onclick事件与href属性的调用顺序关系
a标签onclick与href执行顺序及控制
在 <a> 标签中，点击事件（onclick）的执行顺序优先于 href 属性的跳转逻辑。例如，点击包含以下代码的标签时，会依次弹出“button”和“href”提示：
<a href=”javascript:alert(“href”);” onclick="alert(this.innerHTML);"> button </a>
不建议在 href 属性中直接定义 JavaScript 方法，因为该属性本质用于指定跳转地址。若需连续执行多个 JS 逻辑，推荐写法如下：
<a href=”#” onclick="alert(this.innerHTML); alert(“href”);"> button </a>
上述写法存在隐患：若 onclick 绑定的函数未执行页面跳转，由于 href 值为“#”，页面会刷新并滚动至顶部。在长页面场景中，这会导致用户需重新滚动查找原位置。为解决此问题，应在 onclick 处理逻辑末尾返回 false，以阻止 href 定义的默认动作：
<a href=”#” onclick="alert(this.innerHTML); alert(“href”);return false；"> button </a>
或者，将 href 替换为空的 JavaScript 语句：
<a href=”javascript:void(0)” onclick="alert(this.innerHTML); alert(“href”);"> button </a>
onload事件的调用顺序
onload加载时机与onchange触发限制
页面初始化时，标准做法是通过 <body onload=""> 或 document.onload 调用脚本来设置元素初始状态。onload 事件在页面元素渲染完成后触发，可确保脚本执行时元素已存在。若在 <head> 中的 <script> 块内操作页面元素，极易引发元素未找到的错误；若在 <body> 中执行，则仅能访问该 <script> 块之前已解析的元素，因为 <body> 内容按顺序解析。
onchange事件
<input> 和 <select> 的 <option> 元素均支持 onchange 事件，但常出现值已变化却未触发该事件的情况。这是因为 onchange 的触发还需满足当前元素失去焦点（onblur）这一条件。因此，onchange 仅能捕获用户手动操作引起的值变化，无法捕获通过 JavaScript 脚本动态修改 value 的情况。
事件截获
跨浏览器事件对象获取
由于除 IE 外的浏览器无法识别 window.event，需采用以下兼容方式获取当前事件对象及目标元素：
var evt = e?e:(window.event?window.event:null);
var el = evt.srcElement?evt.srcElement:evt.target;
以下相关文章值得参考：
JavaScript Event事件学习第一章 Event介绍
javascript 跨浏览器的事件系统