javascript中注册和移除事件的4种方式
时间：2021-06-28 08:23:07|栏目：JavaScript代码|点击： 次
对于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()一样。
第一种：
复制代码 代码如下:
<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()一样。
栏 目：JavaScript代码
本文地址：http://www.codeinn.net/misctech/149129.html
