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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 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用header函数实现301跳转代码实例
2013/11/25 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
php异常处理捕获错误整理
2019/09/23 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
如何基于python测量代码运行时间
2019/12/25 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
C面试题
2015/10/08 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP