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 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue--vuex详解
Apr 15 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
小程序实现发表评论功能
2018/07/06 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
python+opencv实现霍夫变换检测直线
2020/10/23 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
教学大赛获奖感言
2014/01/15 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
工作检讨书500字
2014/10/19 职场文书
机关作风建设自查报告
2014/10/22 职场文书
委托函范文
2015/01/29 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
志愿者工作心得体会
2016/01/15 职场文书
庭外和解协议书
2016/03/23 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
mysql创建存储过程及函数详解
2021/12/04 MySQL
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
Redis基本数据类型List常用操作命令
2022/06/01 Redis