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 相关文章推荐
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
HTML的select控件美化
Mar 27 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
vant自定义二级菜单操作
Nov 02 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
娱乐节目策划方案
2014/06/10 职场文书
服务宗旨标语
2014/07/01 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
关于军训的感想
2015/08/07 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL