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 attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
实测jquery data()如何存值
Aug 18 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
jquery实现页面加载效果
Feb 21 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
web方式ftp
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
javaScript基础详解
2017/01/19 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Django中的Model操作表的实现
2018/07/24 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
销售人员个人求职信
2013/09/26 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
人民检察院起诉书
2015/05/20 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers