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 相关文章推荐
iphone safari不支持position fixed的解决方法
May 04 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
linux iconv方法的使用
2011/10/01 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
python选择排序算法的实现代码
2013/11/21 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
关于赌博的检讨书
2014/01/24 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
语文教师个人工作总结
2015/02/06 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL