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 相关文章推荐
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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
西德产收音机
2021/03/01 无线电
使用php4加速网络传输
2006/10/09 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
js实现表格字段排序
2014/02/19 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python实现PID算法及测试的例子
2019/08/08 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
django有哪些好处和优点
2020/09/01 Python
python openCV自制绘画板
2020/10/27 Python
软件测试题目
2013/02/27 面试题
公司成本主管岗位责任制
2014/02/21 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
工作会议简报
2015/07/20 职场文书
如何在Python中创建二叉树
2021/03/30 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js