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实现图片轮播效果
Sep 15 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
浅析Vue 防抖与节流的使用
Nov 14 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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python读写文件方法总结
2015/06/09 Python
详谈python http长连接客户端
2017/06/12 Python
python计算两个地址之间的距离方法
2018/06/09 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
初一英语教学反思
2014/01/11 职场文书
活动志愿者自荐信
2014/01/27 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
中班幼儿评语大全
2014/04/30 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书