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支持的最大递归调用次数分析
Jun 24 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
用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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
跟随鼠标旋转的文字
2006/11/30 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
原生js二级联动效果
2017/06/20 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
django admin组件使用方法详解
2019/07/19 Python
初学者学习Python好还是Java好
2020/05/26 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
车间统计员岗位职责
2014/01/05 职场文书
大班开学家长寄语
2014/04/04 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
初中班主任心得体会
2016/01/07 职场文书
高效课堂教学反思
2016/02/24 职场文书
java多态注意项小结
2021/10/16 Java/Android
SQL SERVER触发器详解
2022/02/24 SQL Server
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL