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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
运行Python编写的程序方法实例
2020/10/21 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
职专应届生求职信
2013/11/16 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫