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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 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
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP正则验证Email的方法
2015/06/15 PHP
php 可变函数使用小结
2018/06/12 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
js中new一个对象的过程
2017/02/20 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
详细介绍Python中的偏函数
2015/04/27 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python反转列表的三种方式解析
2019/11/08 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
学术会议主持词
2014/03/17 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
交通安全学习心得体会
2016/01/18 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang