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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
利用js canvas实现五子棋游戏
Oct 11 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
浅析php变量作用域的一些问题
2013/08/08 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
React组件的三种写法总结
2017/01/12 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
node.js调用C++函数的方法示例
2018/09/21 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
美国鲜花递送:UrbanStems
2021/01/04 全球购物
中科前程Java笔试题
2016/11/20 面试题
优秀党务工作者事迹材料
2014/05/07 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
预备党员转正材料
2014/12/19 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP