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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JS中Location使用详解
May 12 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
Vue实现简单计算器
Jan 20 Vue.js
JavaScript模拟实现网易云轮播效果
Apr 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 全局变量范围分析
2009/08/07 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
javascript中的面向对象
2017/03/30 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python图算法实例分析
2016/08/13 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
pymysql模块使用简介与示例
2020/11/17 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
什么是Remote Module
2016/06/10 面试题
单方投资意向书
2015/05/11 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL