JavaScript中注册和移除事件的4种方式

HTML内联事件绑定

在HTML元素中注册事件处理程序存在多种实现路径。

第一种方式：

 
<script>
function test()
{ 
alert("OK");
} 
</script>
<a href="#" onclick="test()">测试</a>

DOM0级事件处理

第二种方式：

 
<a href="#" id="a">测试</a>
<script>
function test()
{ 
alert("OK");
} 
var x=document.getElementById("a");
x.onclick=test;//注意没有()
</script>

W3C标准事件模型

第三种方式（W3C模型）：

 
<a href="#" id="a">测试</a>
<script>
function test()
{ 
alert("OK");
} 
var x=document.getElementById("a");
x.addEventListener("click",test,false);
</script>

在addEventListener()方法的三个参数中，第一个参数指定事件类型（注意不包含前缀"on"），第二个参数指定处理函数，第三个参数是一个布尔值，用于标识事件触发顺序：true表示事件冒泡（从内向外），false表示事件捕获（从外向内）。

移除该事件的方法为removeEventListener()，其参数结构与addEventListener()完全一致。

这种模式在IE浏览器中会报错，在chrome中正常执行。

IE专有事件模型

第四种方式（微软模型）：

 
<a href="#" id="a">测试</a>
<script>
function test()
{ 
alert("OK");
} 
var x=document.getElementById("a");
x.attachEvent("onclick",test);
</script>

在attachEvent()方法的两个参数中，第一个参数指定事件类型（注意包含前缀"on"），第二个参数指定处理函数。

移除该事件的方法是detachEvent()，其参数结构与attachEvent()相同。