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 入门教程 [翻译] 推荐
Aug 17 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jquery延迟对象解析
Oct 26 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
详解用async/await来处理异步
Aug 28 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 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+mysql删除指定编号员工信息的方法
2015/01/14 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
利用javascript查看html源文件
2006/11/08 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jquery tools之tooltip
2009/07/25 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python编码时应该注意的几个情况
2013/03/04 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
python 读取文件并替换字段的实例
2018/07/12 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Django 路由控制的实现
2019/07/17 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
秋季运动会通讯稿
2014/01/24 职场文书
《学会待客》教学反思
2014/02/22 职场文书
演讲主持词
2014/03/18 职场文书
公司证明怎么写
2014/09/22 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL