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函数用法(判断标签是否拥有某属性)
May 28 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
js判断是否是手机页面
Mar 17 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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脚本的10个技巧(3)
2006/10/09 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript验证身份证号
2015/03/03 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
原生js调用json方法总结
2018/02/22 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python Scrapy框架原理解析
2021/01/04 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
自主实习接收函
2014/01/13 职场文书
行政助理的岗位职责
2014/02/18 职场文书
2015年个人思想总结
2015/03/09 职场文书
教育读书笔记
2015/07/02 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js