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:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jquery预加载图片的方法
May 27 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
微信小程序入门之指南针
Oct 22 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
js实现车辆管理系统
2020/08/26 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python实现随机选择元素功能
2017/09/14 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
小班下学期评语
2014/05/04 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
责任书范本
2014/08/25 职场文书
办公室管理规章制度
2015/08/04 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript