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 相关文章推荐
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
在JavaScript中实现链式调用的实现
Dec 24 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
实现树状结构的两种方法
2006/10/09 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
Js动态创建div
2008/09/25 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue实现折线图 可按时间查询
2020/08/21 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
学生不讲诚信检讨书
2014/09/29 职场文书
干部培训简讯
2015/07/20 职场文书
初中政治教师教学反思
2016/02/23 职场文书