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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Windows下python3.7安装教程
2018/07/31 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
详解Flask前后端分离项目案例
2020/07/24 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
市场营销专业推荐信
2013/11/03 职场文书
数控技术应届生求职信
2013/11/13 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
军神教学反思
2014/02/04 职场文书
电子商务专业求职信
2014/03/08 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
学校读书活动总结
2014/06/30 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
感恩节寄语2015
2015/03/24 职场文书
Python预测分词的实现
2021/06/18 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS