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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
什么是JavaScript
Aug 13 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
vuex实现数据状态持久化
Nov 11 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获取后台Job管理的实现代码
2011/06/10 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
简单实现php上传文件功能
2017/09/21 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
vue实现图书管理demo详解
2017/10/17 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
采购部部门职责
2013/12/15 职场文书
十八大感想感言
2014/02/10 职场文书
最新离婚协议书范本
2014/08/19 职场文书
在职证明书模板
2015/06/15 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis