javascript中的绑定与解绑函数应用示例

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前面才行)

赞 (0)

相关推荐

  • JavaScript中利用jQuery绑定事件的几种方式小结

    JavaScript中利用jQuery绑定事件的几种方式小结

    开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式: 先写几个好看的button //引入JQuery <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <span id="tips"></span> <input type="button" id="btn1"

  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟, 思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内 1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com) 2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX } 代码示例: 复制代码 代码

  • js添加绑定事件的方法

    先介绍js添加事件通用方法,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

  • js和jquery批量绑定事件传参数一(新猪猪原创)

    复制代码 代码如下: <input type="button" value="btn1" id="btn1"/> <input type="button" value="btn2" id="btn2"/> <input type="button" value="btn3" id="btn3"/>

  • js移除事件 js绑定事件实例应用

    复制代码 代码如下: /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvents(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.att

  • js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春

  • JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 复制代码 代码如下: var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 第二种情况 复制代码 代码如下: var tb = document.getElementById("tab1"); if(window.addEventListener){

  • javascript中的绑定与解绑函数应用示例

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • 关于JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

  • JavaScript 中 avalon绑定属性总结

    avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理.我们只要操作VM的数据,它就自然而然地神奇地同步到视图. $model(所有非$属性),$event(事件对象) 1.作用域圈定 ms-controller:按着就近原则自下而上扫描DOM树 ms-important:仅扫描本节点及之下作为扫描区 ms-skip:使绑定失效 2.ms-duplex双向绑定属性:除了绑定(VM同步数

  • jQuery事件多次绑定与解绑问题实例分析

    jQuery事件多次绑定与解绑问题实例分析

    本文实例分析了jQuery事件多次绑定与解绑问题.分享给大家供大家参考,具体如下: jQuery事件绑定很常见,相信大家经常会用到click.focus.blur等事件,但是如果对控件的某个事件绑定多个方法会是怎样的结果呢,覆盖.累加.或其他效果?今天我就来验证一下这个疑问并说说如何解绑. 一.jQuery事件多次绑定 <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">&l

  • javascript中Promise使用详解

    目录 一.首先,要知道为什么要用Promise语法? 二.接着,来了解一下回调地狱(Callback Hell) 三.最后,也是本章的重头戏,Promise的基本使用 (一) resolve函数 (二) rejected函数 (三)Promise的API 1. then 2. catch 3. finally 4. Promise.all 5. Promise.race 四.最后 前言: 做过前端开发的都知道,JavaScript是单线程语言,浏览器只分配给JS一个主线程,用来执行任务,但是每次

  • JavaScript中判断变量是数组、函数或是对象类型的方法

    数组 ECMAScript5中Array.isArray是原生的判断数组的方法,IE9及以上支持.考虑到兼容性,在没有此方法的浏览器中,可以使用 Object.prototype.toString.call(obj) === '[object Array]'替代. 复制代码 代码如下: var isArray = Array.isArray || function(obj) {     return Object.prototype.toString.call(obj) === '[object

  • javascript中正则表达式语法详解

    好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符

  • JavaScript中的50+个实用工具函数小结

    JavaScript可以做很多出色的事情,本篇文章给大家整理50+个实用工具函数,可以帮助你提高工作效率并可以帮助调试代码 1.isStatic: 检测数据是不是除了symbol外的原始数据. function isStatic(value) { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined'

  • C++11中bind绑定器和function函数对象介绍

    C++11中bind绑定器和function函数对象介绍

    目录 一. bind1st和bind2nd 1.C++ STL中的绑定器 2.bind1st和bind2nd的底层原理实现 二. 模板的完全特例化和非完全特例化 三. function函数对象 四. bind和function实现线程池 五. lambda表达式 1.lambda表达式的实现原理 2.lambda表达式的应用实践 一. bind1st和bind2nd 1.C++ STL中的绑定器 bind1st:operator()的第一个形参变量绑定成一个确定的值 bind2nd:operat

  • javascript中this关键字详解

    不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用场合 2.1:全局环境 2.2:构造函数 2.3:对象的方法 3.使用注意点 3.1:避免多层嵌套this 3.2:避免数组处理方法中的this 3.3:避免回调函数中的this 1.涵义 1.1:this涵义 在我写的一篇关于 构造函数与new关键字

随机推荐