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 学习技巧
Feb 17 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
短波问题解答
2021/02/28 无线电
php session处理的定制
2009/03/16 PHP
php中in_array函数用法探究
2014/11/25 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
PHP时间类完整代码实例
2021/02/26 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
市场营销战略计划书
2014/05/06 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
交通安全教育心得体会
2016/01/15 职场文书
高中班主任寄语
2019/06/21 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang