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.idTabs 选项卡使用示例代码
Sep 03 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
微信小程序开发探究
Dec 27 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
js实现简单扫雷
Nov 27 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 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
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
深入理解python中的atexit模块
2017/03/07 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
什么是Web Service?
2012/07/25 面试题
四查四看剖析材料
2014/02/14 职场文书
安全月活动总结
2014/05/05 职场文书
岗位明星事迹材料
2014/05/18 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2014年党委工作总结
2014/11/22 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js