attachEvent,addEventListener事件绑定
兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数)。
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事件绑定的更多相关文章
- javascript之事件绑定
曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)
/** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- js -- 绑定的click addEventListener 事件只触发一次
var btn = document.getElementById('btn'); // 添加事件绑定 btn.addEventListener('click', btnClick, false); ...
- js addEventListener事件多次绑定问题
如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.
- 事件绑定addEventListener
通过addEventListener监听函数实现的dom事件绑定 addEventListener可以为当前dom添加一个事件(这个事件可以是个已有的事件),这就无法避免我们在写代码的时候重复去绑定同 ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
随机推荐
- Django 学习笔记之一 环境搭建
以后的文章都是在windows系统进行的 首先下载安装Django包 方式1:使用 pip或easy_insatll来进行安装 同时按住win+R键,弹出命令行运行框输入,pip install Dj ...
- PHP的会话处理函数session
(๑•ᴗ•๑) PHP Session 变量 当运行一个应用程序时,你会打开它,做些更改,然后关闭它.这很像一次会话.计算机清楚你是谁.它知道你何时启动应用程序,并在何时终止.但是在因特网上,存在一个 ...
- BAT CMD 批处理文件脚本 -1
http://www.cnblogs.com/linglizeng/archive/2010/01/29/Bat-CMD-ChineseVerion.html 1. 综述 ...
- java 获取获取字符串编码格式
public static String getEncoding(String str) { String encode = "GB2312"; try { if (str.equ ...
- c++ freelockquque
http://www.boost.org/doc/libs/1_56_0/doc/html/boost/lockfree/queue.html Class template queue boost:: ...
- T-SQL操作表结构(转)
在网上整理的一牛人资料,收集与此与君共享 用SQL语句添加删除修改字段1.增加字段 ALTER TABLE [yourTableName] ADD [newColumnName] newCo ...
- 【DDD-Apwork框架】事件总线和事件聚合器
第一步:事件总线和事件聚合器 [1]事件总线 IEventBus IUnitOfWork.cs using System; using System.Collections.Generic; usin ...
- Linq查询Count、Sum、Min、Max、Average
原文地址:Linq——Count.Sum.Min.Max.Average作者:mousekitty Linq查询之Count.Sum.Min.Max.Average using System; usi ...
- MonthPicker
可以只选择MMM-yyyy的样式,而不需要确定day. http://lucianocosta.info/jquery.mtz.monthpicker/
- Android学习及开发随记1:Android Studio安装配置
1.本系列仅为个人使用,概不负责.随着时间推移,部分内容可能因为软件更新而出现不能对应的情况. 本文的配置情况,仅针对Android Studio v1.1.0 windows版本 全新安装. Goo ...