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 面向对象编程 万物皆对象
Sep 17 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
vue实现简单全选和反选功能
Sep 15 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与ASP
2006/10/09 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
浅析JavaScript中的类型和对象
2013/11/29 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
2015年前台接待工作总结
2015/05/04 职场文书
一个都不能少观后感
2015/06/04 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
详解jQuery的核心函数和事件处理
2022/02/18 jQuery