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 Discuz代码中的msn聊天小功能
May 25 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
Vue自定义多选组件使用详解
2020/09/08 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python中关于使用模块的基础知识
2015/05/24 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Python中Qslider控件实操详解
2021/02/20 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
C语言50道问题
2014/10/23 面试题
积极分子思想汇报
2014/01/04 职场文书
求职意向书范文
2014/04/01 职场文书
小学五年级学生评语
2014/04/22 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
加薪申请报告范本
2015/05/15 职场文书
火烧圆明园观后感
2015/06/03 职场文书