javascript中的绑定与解绑函数应用示例


Posted in Javascript onJune 24, 2013

Mozilla中:

addEventListener的使用方式:

target.addEventListener(type, listener, useCapture);

target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中:

target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

target.addEventListener(type, listener, useCapture);
target 文档节点、document、window 或 XMLHttpRequest。
type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false
事件触发时,会将一个 Event 对象传递给事件处理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法 按钮onclick IE中使用
addEventListener方法 按钮click fox中使用
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
实例:(要注意的是div必须放到js前面才行)

Javascript 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
浅谈JavaScript字符集
May 22 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
从原生JavaScript到React深入理解
Jul 23 Javascript
用jquery生成二级菜单的实例代码
Jun 24 #Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 #Javascript
jquery中的事件处理详细介绍
Jun 24 #Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 #Javascript
Js注册协议倒计时的小例子
Jun 24 #Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 #Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
PHP学习之PHP运算符
2006/10/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python最长回文串算法
2018/06/04 Python
详解Django 时间与时区设置问题
2019/07/23 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
小小商店教学反思
2014/04/27 职场文书
民用住房租房协议书
2014/10/29 职场文书
离职证明范本
2015/06/12 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
学习十八大的感悟
2015/08/11 职场文书
会议主持词通用版
2019/04/02 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL