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 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JS实现横向轮播图(中级版)
Jan 18 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
JavaScript的Set数据结构详解
Feb 18 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_MySQL教程-第一天
2007/03/18 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
python实现播放音频和录音功能示例代码
2018/12/30 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
销售团队口号大全
2014/06/06 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
管理失职检讨书范文
2015/05/05 职场文书
信仰纪录片观后感
2015/06/08 职场文书
歌咏比赛主持词
2015/06/29 职场文书
会计入职心得体会
2016/01/22 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
php双向队列实例讲解
2021/11/17 PHP
Python内置数据类型中的集合详解
2022/03/18 Python