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_11_constructor实现原理
Oct 18 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
比较node.js和Deno
Apr 27 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
pytorch permute维度转换方法
2018/12/14 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python实现简单图片物体标注工具
2019/03/18 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
python多进程使用函数封装实例
2020/05/02 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
什么是会话Bean
2015/05/14 面试题
支部书记四风问题自我剖析材料
2014/09/29 职场文书
项目合作意向书
2015/05/08 职场文书
幼儿园见习总结
2015/06/23 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android