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用Number方法实现string转int
May 13 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
JavaScript闭包相关知识解析
Oct 19 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
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 Redis内存占用
2017/03/23 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
Python创建系统目录的方法
2015/03/11 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
员工入职担保书范文
2014/04/01 职场文书
技术负责人任命书
2014/06/05 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
小学英语教学随笔
2015/08/14 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang