Event事件的兼容性

window.event问题
问题说明:window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。
解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var evt= evt?evt:(window.event?window.event:null)

在Firefox页面调用后,其windows.event对象为undefined:

  1. if (typeof (window.event) == ‘undefined‘)
  2. alert(‘window.event is undefined.‘);
  3. else
  4. alert(‘window.event is defined.‘);

以上代码在Firefox中执行,结果为:"window.event is undefined."。IE 和 Chrome中执行结果:“window.event is defined."

1. 在函数中传递event参数

在函数中传递event参数,这样我们就可以兼容IE和FF的event的获取了,如下面的函数:

function _test(evt)
{  var evt= evt?evt:(window.event?window.event:null);
    var src = evt.srcElement || evt.target; // 获取触发事件的源对象
    alert(src.value); // 打印该对象的value属性

}

那么我们在使用的时候就应该这样:

<input type=‘button‘ value=‘click me‘ onclick=‘_test(event)‘ />

2.在函数调用中不传递event对象

虽然在函数中没有传递参数,这个在IE下没有任何影响,因为window.event是全局对象,在什么地方都可以直接调用的,而在FF下就不行了。所以我们这里要使用另外一种方式来获取了,如下:

unction _test2()
{
    var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
    var src = evt.srcElement || evt.target; // 获取触发事件的源对象
    var iKeyCode = evt.keyCode || evt.which; //获取按钮代码
    alert(src.value); // 打印该对象的value属性
    if (window.navigator.userAgent.indexOf("IE")>=1){
       evt.keyCode =0;
              evt.returnValue=false;
           }else{
              evt.preventDefault();
           }

}

那么,我们在使用的时候就可以想普通的函数调用一样,直接输入函数名称即可,如下:

<input type=‘button‘ value=‘click me2‘ onclick=‘_test2()‘ />

event.srcElement问题
问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有 srcElement属性。
解决方法:使用srcObj = event.srcElement ? event.srcElement : event.target;

时间: 2024-08-14 22:42:17

Event事件的兼容性的相关文章

笔记-【3】-event事件对象的详解!

event事件对象:是指当前对象发生的事件的一些详细的信息在event这个对象里. event对象从哪里来?从事件函数中传入 obj. //e就会当前的事件对象event } 对象就有属性和方法:那么event对象也有属性和方法 event的属性和方法: { 属性: button :  当前事件的方法中判断鼠标的按键位置 有三个值: 0 (左键) 1(滚轮) 2(右键) ctrlkey:  判断是否按下了ctrl键; altkey:  判断是否按下了alt键; shiftkey:  判断是否按下

简单总结焦点事件、Event事件对象、冒泡事件

每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基本的知识点. 1.焦点事件: 1.1概念理解: 想象场景:当一堆text文本框出现在面前,当点击其中一个文本框,它就会响应用户,并出现光标闪动(这时,点击令它获得焦点). 所以说:焦点事件是用来让浏览器区分哪一个对象是用户要进行操作(输入值.选择.跳转)的. 总结===>  浏览器(区分)哪一个对象

Javascript事件机制兼容性解决方案

原文:Javascript事件机制兼容性解决方案 本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTagName('input')[0]; var form = document.getElementsByTagName('form')[0]; Evt.on(input, 'click', function(evt){ console.log('inp

JS中event事件

JS事件基础 1.event对象 (1)用来获取事件的详细信息:鼠标位置.键盘位置 document的本质:document.childNodes[0].tagName     例子:获取鼠标位置:clientX横坐标,clientY纵坐标 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>

Event事件详解

首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点.而并不是所有元素都能够接收焦点的,能够响应用户操作的元素才有焦点.例如: <input type="text" /> <a href="http://www.baidu.com">百度</a> 说到input,平时用的较多的是o

event事件学习小节

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event事件</title> </head> <body> <script> document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持: var e=ev; consol

trigger()的event事件对象之坑

问题引入,先贴一段有问题的代码,如果你对 trigger()  这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐藏按钮们:控制台会报错: target  属性是 undefined ,肯定是 event 这个事件对象没获取到的问题,程序到17行出错停止,这让我感到疑问:自定义触发的事件难道没有event对象吗?. 1 <div id="switcher" class="switche

JS之Event事件

<script> function ff(event) { var e = window.event||event;//Event对象:发生当前事件的状态 // var src = e.srcElement||e.target;//获得事件中的value值 var c = e.keycode||e.charCode;//获得键盘输入的值的编码 // alert(e); // alert(src.value); alert(c); } /** var e; if(window.event){ e

HTML DOM event 事件 (丫头, 好想你了)

HTML DOM event 事件, 用用就知道了 function isKeyPressed(eventssdasd)     // 这个地方其实无关紧要,就是定义一个名称而已, 不过为了好看, 最好还是写成 event{  if (event.altKey==1)                        // event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等,此处为检测 alt 键是否按下    {  // 此处的 event 必须写正确, 你可以