ie与ff下的event事件使用介绍


Posted in Javascript onNovember 25, 2013

event是ie自带的一个对象,而ff中不存在该对象,只能通过传递参数的方式来模拟event

另外ie中使用srcElement去获得事件触发源,ff下使用target。因此使用这两个对象时需要做相关的浏览器兼容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>srcElement --https://3water.com/</title> 
<script type="text/javascript"> 
<!-- 
function Click(event){ 
event = event? event: window.event 
var obj = event.srcElement ? event.srcElement:event.target; 
alert(obj.tagName); 
} 
//--> 
</script> 
</head> <body> 
<button id="btn" onclick="Click(event)">点击</button> 
</body> 
</html>

查看运行结果
综合上节attachEvent与addEventListener。
<script type="text/javascript"> 
<!? 
function Click(event){ 
event = event? event: window.event; 
var obj = event.srcElement ? event.srcElement:event.target; 
alert("eventObj.tabName:" + obj.tagName); 
} 
var oBtnNew; 
window.onload=function(){ 
oBtnNew=document.getElementById("btnNew"); 
if(window.attachEvent){ 
oBtnNew.attachEvent("onclick",hanlder); 
oBtnNew.attachEvent("onmouseover",hanlder); 
}else{ 
oBtnNew.addEventListener("click",hanlder,false); 
oBtnNew.addEventListener("mouseover",hanlder,false); 
} 
/*或者采用下面试 
oBtnNew.onclick=hanlder; 
oBtnNew.onmouseover=hanlder;*/ 
} 
function hanlder(event){ 
event=event?event:window.event; 
if(event.type=="click") 
oBtnNew.innerHTML="发生了onclick事件"; 
else if(event.type=="mouseover") 
oBtnNew.innerHTML="发生了onmouseover事件"; 
} 
//?> 
</script> 
</head> 
<body> 
<button id="btn" onclick="Click(event)">点击</button> 
<button id="btnNew">添加事件点击</button>
Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
javascript 函数式编程
Aug 16 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
javascript利用apply和arguments复用方法
Nov 25 #Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 #Javascript
js给onclick赋值传参数的两种方法
Nov 25 #Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 #Javascript
写JQuery插件的基本知识
Nov 25 #Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 #Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/02 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JavaScript生成简单等差数列
2017/11/28 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
Python中datetime模块参考手册
2017/01/13 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
基于python实现聊天室程序
2018/07/27 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python conda操作方法
2019/09/11 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
即将毕业大学生自荐信
2014/01/24 职场文书
《都江堰》教学反思
2014/02/07 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
董事长开业致辞
2015/07/29 职场文书
php 原生分页
2021/04/01 PHP
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL