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写的一个DIV 弹出网页对话框
Aug 14 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
webpack独立打包和缓存处理详解
Apr 03 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
React 路由懒加载的几种实现方案
Oct 23 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 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
phpwind中的数据库操作类
2007/01/02 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
tensorflow的计算图总结
2020/01/12 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
现实表现证明材料
2015/06/19 职场文书
交流会主持词
2015/07/02 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
Nginx 匹配方式
2022/05/15 Servers
springcloud整合seata
2022/05/20 Java/Android
python读取mat文件生成h5文件的实现
2022/07/15 Python