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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue element table中自定义一些input的验证操作
Jul 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
值得收藏的vuejs安装教程
2017/11/21 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
JS实现520 表白简单代码
2018/05/21 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python使用xslt提取网页数据的方法
2018/02/23 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
django配置app中的静态文件步骤
2020/03/27 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
python opencv旋转图片的使用方法
2021/06/04 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
MySQL数据库 安全管理
2022/05/06 MySQL