attachEvent,addEventListener事件绑定
2024-08-27 04:34:10
兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数)。
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>
注意:匿名函数解除不掉绑定(因为即使两个匿名函数长的一样,但是不是同一个函数)
最新文章
- Linux设备管理(二)_从cdev_add说起
- 在SQLSERVER2008中建立数据库复制碰到的问题
- maven_spring mvc_mina_dome(实体,文件,批传)(spring mina 初学dome)
- 修改wampserver 默认localhost 和phpmyadmin 打开链接
- 2015年第2本(英文第1本):《The Practice of Programming》
- ural 1283. Dwarf
- -05 08:57 ARCGIS地统计学计算文件后缀名为.shp文件制作
- wordpress 中禁止更新提示
- hibernate初次配置问题
- Mtk Android编译命令
- Android名词解释
- AOT
- MFC 窗口重绘问题
- Oracle压缩总结2— 估计表压缩效应
- Even Parity uva11464 模拟
- JAVA提高七:类加载器
- 身为运维的你,怎么掌握python才不会失业
- Unity UGUI之Canvas&;EventSystem
- maven各个属性参数详解
- 【ASP.NET Core】EF Core 模型与数据库的创建
热门文章
- IOS 后台运行
- 【WCF--初入江湖】10 序列化和传输大型数据流
- SystemInfo.deviceUniqueIdentifier 返回机器码
- WCF入门(七)——异常处理1
- NET 使用HtmlAgilityPack抓取网页数据
- 系统学习sqlserver2012 一
- Eclipse 编译错误 Access restriction:The type *** is not accessible due to restriction on... 解决方案
- http://www.aboutyun.com/thread-8792-1-1.html
- 李洪强iOS开发之让您的Xcode键字如飞
- org.apache.common.io-FileUtils详解