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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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给每个段落添加空格的方法
2015/03/20 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
python双向链表实现实例代码
2013/11/21 Python
进一步理解Python中的函数编程
2015/04/13 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
详解python数据结构和算法
2019/04/18 Python
Python 监测文件是否更新的方法
2019/06/10 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
小学毕业感言150字
2014/02/05 职场文书
请假条的格式
2014/04/11 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
员工年度工作总结2015
2015/05/18 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
PL350与SW11的比较
2021/04/22 无线电