JavaScript 事件注册机制演进与跨浏览器兼容方案

内联事件绑定与 DOM Level 0 分离

首先介绍最基础的事件绑定方式。

程序代码

 
<p id="para" title="cssrain demo!" onclick="test()" >test</p>
<script>
function test(){
alert("test");
} 
</script>

随着前端开发规范的提升，我们倾向于将 JavaScript 逻辑与 HTML 结构分离。此时，事件绑定方式也随之改变。

程序代码

 
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
} 
window.onload = function(){
document.getElementById("para").onclick = test;
} 
</script>

在实际开发中，经常需要为同一个元素绑定多个相同类型的事件。

程序代码

 
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
} 
function pig(){
alert("pig");
} 
window.onload = function(){
document.getElementById("para").onclick = test;
document.getElementById("para").onclick = pig;
} 
</script>

若采用上述直接赋值的方式，后绑定的事件会覆盖先绑定的事件，导致只能触发第二个函数。

多事件绑定与 IE 兼容处理

为解决多事件绑定问题，可以使用 attachEvent 方法。

程序代码

 
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
} 
function pig(){
alert("pig");
} 
window.onload = function(){
document.getElementById("para").attachEvent("onclick",test);
document.getElementById("para").attachEvent("onclick",pig);
} 
</script>

在特定时期，这段代码看似运行正常。

然而，当引入 Firefox 等浏览器时，执行该代码会发现无法正常运行。

此类兼容性问题日益增多，是 JavaScript 开发者必须面对的挑战。

跨浏览器兼容性与通用封装

为了解决跨平台兼容性问题，需要区分 Firefox 与 IE 的事件注册机制。

Firefox 支持 addEventListener 方法，而为了兼容 IE，必须使用 if...else... 进行分支判断。

程序代码

 
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
} 
function pig(){
alert("pig");
} 
window.onload = function(){
var element = document.getElementById("para");
if(element.addEventListener){ // firefox , w3c
element.addEventListener("click",test,false);
element.addEventListener("click",pig,false);
} else { // ie
element.attachEvent("onclick",test);
element.attachEvent("onclick",pig);
} 
} 
</script>

经过上述处理，代码即可在多个平台上正常工作。

随着技术熟练度提升，为避免重复编写判断逻辑，可将该过程封装为通用函数以便调用。

程序代码

 
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
} 
function pig(){
alert("pig");
} 
function addListener(element,e,fn){
if(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent("on" + e,fn);
} 
} 
window.onload = function(){
var element = document.getElementById("para");
addListener(element,"click",test);
addListener(element,"click",pig);
} 
</script>

至此，事件注册功能的封装工作完成。

回顾整个过程：从最传统的内联写法，到实现 JS 与 HTML 分离，再到支持同一元素注册多个事件，期间解决了注册事件的兼容性问题，最终对注册事件的方法进行封装，以便后续直接使用。