javascript中注册和移除事件的4种方式
更新时间：2013年03月20日 14:55:17 作者：
对于html中的一些元素注册事件的方式有多种，接下来将为大家详细介绍下，大家可以测试并对比下根据自己的习惯使用哪一种方式
对于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对象继承，先从一个问题出发，引入javascript对象继承相关知识，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了PHP读取远程txt文档到数组并实现遍历,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要为大家详细介绍了Bootstrap对话框使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
本文通过实例代码给大家介绍了微信小程序中使用ECharts 异步加载数据实现图表功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
在前端开发中,我们可能经常需要用到枚举,使用枚举的好处是为了让代码的可读性更强,避免直接使用数字或未知的字符串,但是在JavaScript中,要自己实现一个枚举功能,那么大家能想到多少种实现枚举的方法呢,我将介绍几种实现枚举的好方法2023-08-08
出于安全性考虑，JS是不能直接设置File的value值的，下面是我总结出来的方法2010-09-09
在做一些关于会员在线的问题时，往往我们要根据览器是否关闭来判断用户是否下线，然后再从session和application中将此用户移除，下面与大家分享下具体的捕捉方法2013-06-06
这篇文章主要介绍了微信小程序外卖选购页实现切换分类与数量加减功能,结合具体实例形式分析了微信小程序状态记录、判定及数值运算相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了javascript实现的HashMap类代码,实现了添加、获取、删除、查询key和value功能,需要的朋友可以参考下2014-06-06
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
这篇文章主要介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论