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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
vue实现井字棋游戏
Sep 29 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数据库代码
2009/03/10 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php array_map()函数实例用法
2021/03/03 PHP
jQuery下的动画处理总结
2013/10/10 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python生成短uuid的方法实例详解
2018/05/29 Python
Python函数参数操作详解
2018/08/03 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python3实现定时任务的四种方式
2019/06/03 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
温馨提示标语
2014/06/26 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2015大学生求职信范文
2015/03/20 职场文书
硕士学位申请报告
2015/05/15 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Golang 字符串的常见操作
2022/04/19 Golang
Java死锁的排查
2022/05/11 Java/Android