JavaScript 跨浏览器事件处理：从绑定到细节控制

简单与高级事件模型对比

事件处理主要包含简单事件模型与高级事件模型两种形式。

 
<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);
} 
} 

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加载时机与onchange触发限制

页面初始化时，标准做法是通过 <body onload=""> 或 document.onload 调用脚本来设置元素初始状态。onload 事件在页面元素渲染完成后触发，可确保脚本执行时元素已存在。若在 <head> 中的 <script> 块内操作页面元素，极易引发元素未找到的错误；若在 <body> 中执行，则仅能访问该 <script> 块之前已解析的元素，因为 <body> 内容按顺序解析。

<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 跨浏览器的事件系统