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控制frame的隐藏或显示的解决办法
Mar 20 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
用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
967 个函式
2006/10/09 PHP
php 字符转义 注意事项
2009/05/27 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
node版本管理工具n包使用教程详解
2018/11/09 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python入门教程之识别验证码
2017/03/04 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
解决yum对python依赖版本问题
2019/07/05 Python
学习Django知识点分享
2019/09/11 Python
python实现五子棋程序
2020/04/24 Python
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
公司董事长职责
2013/12/12 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
学校捐书倡议书
2015/04/27 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
pandas中pd.groupby()的用法详解
2022/06/16 Python
Vue Element plus使用方法梳理
2022/12/24 Vue.js