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编程起步(第五课)
Jan 10 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php中的时间显示
2007/01/18 PHP
php简单压缩css样式示例
2016/09/22 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
用ADODB.Stream转换
2007/01/22 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
什么是.net的Remoting技术
2016/07/08 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
行政经理的岗位职责
2013/11/23 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
代理人委托书
2014/08/01 职场文书
高中同学会活动方案
2014/08/14 职场文书
小学运动会报道稿
2015/07/22 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js