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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
requireJS使用指南
Apr 27 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 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应用程序的七个习惯深入分析
2013/06/08 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
js实现简单计算器
2015/11/22 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
js实现双人五子棋小游戏
2020/05/28 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python定时关机小脚本
2018/06/20 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
学python最电脑配置有要求么
2020/07/05 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
2014优秀党员事迹材料
2014/08/14 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
小学教师师德整改措施
2014/09/29 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android