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

171 阅读 0 评论 113 点赞

我是靠谱客的博主爱笑学姐，最近开发中收集的这篇文章主要介绍javascript中注册和移除事件的4种方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对于html中的一些元素注册事件的方式有多种
第一种：

复制代码代码如下:

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

第二种：

复制代码代码如下:

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

第三种(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中正常执行。

第四种(微软模型)：

复制代码代码如下:

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

其中attachEvent()两个参数中，第一个表示什么事件类型，注意带on，第二个指定方法。
移除事件的方法是detachEvent(),其中参数和attachEvent()一样。