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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
JS实现打字游戏
Dec 17 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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开发中常用的8个小技巧
2008/08/27 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js数组的操作指南
2014/12/28 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
Python运算符重载用法实例
2015/05/28 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python random模块的使用示例
2020/10/10 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
市场安全管理制度
2014/01/26 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技