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图片阅览组件
Nov 09 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
通过JS深度判断两个对象字段相同
Jun 14 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 include加载文件两种方式效率比较
2010/08/08 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
javascript this详细介绍
2016/09/19 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
详解Vue之事件处理
2020/07/10 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
在Python中处理XML的教程
2015/04/29 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python中entry用法讲解
2020/12/04 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
若干个Java基础面试题
2015/05/19 面试题
总经理职责
2013/12/22 职场文书
工作求职自荐信
2014/06/13 职场文书
建筑结构施工求职信
2014/07/11 职场文书
事业单位年度考核评语
2014/12/31 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
灵山大佛导游词
2015/02/04 职场文书
工作简报范文
2015/07/21 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫