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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
单元选择合并变色示例代码
May 26 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
js实现简单放大镜效果
Mar 07 Javascript
在Vuex中Mutations修改状态操作
Jul 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
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php实现图片添加水印功能
2014/02/13 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JS中的phototype详解
2017/02/04 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python正则实现提取电话功能
2018/02/24 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python系列 文件操作的代码
2019/10/06 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python软件都是免费的吗
2020/06/18 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
服装店营销方案
2014/03/10 职场文书
小学六年级学生评语
2014/04/22 职场文书
2014年党支部承诺书
2014/05/30 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
给老婆的道歉信
2015/01/20 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
AngularJS实现多级下拉框
2022/03/25 Javascript