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


Posted in Javascript onMarch 20, 2013

对于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()一样。
Javascript 相关文章推荐
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
基于javascript编写简单日历
May 02 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 #Javascript
jQuery实现id模糊查询的小例子
Mar 19 #Javascript
JS文本框不能输入空格验证方法
Mar 19 #Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 #Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 #Javascript
input输入框的自动匹配(原生代码)
Mar 19 #Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 #Javascript
You might like
php隐藏实际地址的文件下载方法
2015/04/18 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
node.js超时timeout详解
2014/11/26 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
详解React项目中碰到的IE问题
2019/03/14 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
关于Python错误重试方法总结
2021/01/03 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
技术学校毕业生求职信分享
2013/12/02 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
节约粮食标语
2014/06/18 职场文书
5s标语大全
2014/06/23 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python