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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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截取中文字符串的问题
2006/07/12 PHP
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP多态代码实例
2015/06/26 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
详解Vue方法与事件
2017/03/09 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
生产部主管岗位职责
2014/01/06 职场文书
公司收款委托书范本
2014/09/20 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
董事长开业致辞
2015/07/29 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
大学班长竞选稿
2015/11/20 职场文书