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 相关文章推荐
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
第三节--定义一个类
2006/11/16 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
XML的代替者----JSON
2007/07/21 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
package.json文件配置详解
2017/06/15 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
np.random.seed() 的使用详解
2020/01/14 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
python源文件的字符编码知识点详解
2021/03/04 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
《夏夜多美》教学反思
2014/02/17 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
试用期辞职信范文
2015/03/02 职场文书
党支部考察意见范文
2015/06/02 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis