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 兼容firefox的一些问题
May 21 Javascript
广告切换效果(缓动切换)
May 27 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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/06/23 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
python实现清屏的方法
2015/04/30 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python 文件操作的详解及实例
2017/09/18 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
电大自我鉴定范文
2013/10/01 职场文书
《散步》教学反思
2014/03/02 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
法院授权委托书范文
2014/08/02 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
高中生逃课检讨书
2014/10/10 职场文书
法制教育观后感
2015/06/17 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript