兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数)。

1.绑定方法:

 //IE attachEvent(事件名, 函数)
oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb); //FF addEventListener(事件名, 函数, 是否捕获 false)
oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);

2.例子:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function aaa(){
alert('a');
} function bbb(){
alert('b');
} window.onload=function (){
var oBtn=document.getElementById('btn1'); /*oBtn.onclick=aaa;
oBtn.onclick=bbb; 覆盖掉aaa*/ if(oBtn.attachEvent){
oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb);
}
else{
oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);
}
};
</script>
</head> <body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>

3.如何用于写一个用于时间绑定的公共函数

例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
} function aaa(){
alert('a');
} function bbb(){
alert('b');
} window.onload=function (){
var oBtn=document.getElementById('btn1'); bind(oBtn, 'click', aaa);
bind(oBtn, 'click', bbb);
};
</script>
</head> <body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>
4.解除绑定(以IE为例):
 <script type="text/javascript">
window.onload=function ()
{
var oBtn=document.getElementById('btn1'); //IE attachEvent/detachEvent
//FF addEventListener/removeEventListener
var a=function (){
alert('dafsdf');
}; oBtn.attachEvent('onclick', a);
oBtn.detachEvent('onclick', a);
};
</script>

注意:匿名函数解除不掉绑定(因为即使两个匿名函数长的一样,但是不是同一个函数)

attachEvent,addEventListener事件绑定的更多相关文章

  1. javascript之事件绑定

    曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...

  2. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  3. 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)

    /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...

  4. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  5. js -- 绑定的click addEventListener 事件只触发一次

    var btn = document.getElementById('btn'); // 添加事件绑定 btn.addEventListener('click', btnClick, false); ...

  6. js addEventListener事件多次绑定问题

    如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.

  7. 事件绑定addEventListener

    通过addEventListener监听函数实现的dom事件绑定 addEventListener可以为当前dom添加一个事件(这个事件可以是个已有的事件),这就无法避免我们在写代码的时候重复去绑定同 ...

  8. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  9. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

随机推荐

  1. HDU 5629 Clarke and tree dp+prufer序列

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=562 题意: 求给每个节点的度数允许的最大值,让你求k个节点能组成的不同的生成树个数. 题解: 对于n ...

  2. MemSQL Start[c]UP 2.0 - Round 1

    A. Eevee http://codeforces.com/contest/452/problem/A 字符串水题 #include<cstdio> #include<cstrin ...

  3. Node.js 随记

    http://nodejs.org/  下载并安装 node.js 最新版本 运行cmd,输入npm install xxxxxx 回车,安装扩展模块,如:express,socket.io等 运行c ...

  4. Linux下tcp协议socket的recv函数返回时机分析(粘包)

    http://www.vckbase.com/index.php/wv/10http://blog.csdn.net/zlzlei/article/details/7689409 文章一: 当前在网络 ...

  5. (二)、SSL证书

    从第一部分HTTPS原理中,我们可以了解到HTTPS核心的一个部分是数据传输之前的握手,握手过程中确定了数据加密的密码.在握手过程中,网站会向浏览器发送SSL证书,SSL证书和我们日常用的身份证类似, ...

  6. Jmeter 快速入门教程(二)--创建简单web测试

    [版权所有: whoistester.com & jmeter.cf] http://wenku.baidu.com/linkurl=9zc4VHe6vUUeMdDZPpNsRehkazZFw ...

  7. Mac 下 docker安装

    http://www.th7.cn/system/mac/201405/56653.shtml Mac 下 docker安装 以及 处理错误Cannot connect to the Docker d ...

  8. lintcode :数组剔除元素后的乘积

    题目: 数组剔除元素后的乘积 给定一个整数数组A. 定义B[i] = A[0] * ... * A[i-1] * A[i+1] * ... * A[n-1], 计算B的时候请不要使用除法. 样例 给出 ...

  9. lintcode :Remove Duplicates from Sorted Array II 删除排序数组中的重复数字 II

    题目: 删除排序数组中的重复数字 II 跟进“删除重复数字”: 如果可以允许出现两次重复将如何处理? 样例 给出数组A =[1,1,1,2,2,3],你的函数应该返回长度5,此时A=[1,1,2,2, ...

  10. Makefile笔记

    一个简单的Makefile描述规则组成: TARGET...:PREREQUISITES... COMMANDS... ... target:规则的目标.通常是程序中间或者最后要生成的文件名,也可以是 ...