zoukankan      html  css  js  c++  java
  • IE的window.event实例

    今天在QQ群里有人提到一个奇怪问题,是有关IE的事件对象有时候不等于自身的,见下面代码(注意,本文的所有例子请在IE下执行):

     
    <button id='ss' onclick="xx(window.event)">Click</button>
        <script type="text/javascript">
          alert(window.event==window.event);  //true
    
          (function(){
            alert(window.event==window.event);//true
          })();
    
          function xx(e){
            alert(e==window.event);//false
            alert(window.event==window.event);//false
          }
        </script>
    

    当我们点击按钮后,发现弹出的是两个false。很明显这是两个不同的对象。可以通过以下实验证明:

     
     <button id='ss'type="button"  
        onclick="var a = window.event; a.aaa = '司徒正美';xx(a)">Click</button>
        <script type="text/javascript">
          function xx(e){
            alert(e.aaa)//司徒正美
            alert(window.event.aaa)//undefined
            alert(e==window.event);//false
            alert(window.event==window.event);//false
          }
        </script>
    

    知道这个后,我们要探讨的是什么情况下才产生一个新的实例。经过仔细观察,如果直接放到全局作用域下,或自动执行函数中,比较的两个window.event是相同的。一旦执行事件了,就有新的实例生成了,并且是一个window.event对应一个新实例。换言之,出现两次window.event就有两个不同的事件实例,这样推断就可以解析上面的现象了。我们可以通过以下实验证明一下:

     
     <button id='ss'type="button" onclick="xx()">Click</button>
        <script type="text/javascript">
          function xx(e){
            var a = window.event;//生成一个新实例,
            a.id = "司徒正美";
            var b = window.event;
            b.id = "ruby louvre";
            var c = window.event;
            c.id = "しとうなさみ"
            alert(a.id);//司徒正美
            alert(b.id);//ruby louvre
            alert(c.id);//"しとうなさみ"
            alert(a === b)//false
            alert(a === c)//false
          }
        </script>
    

    因此,我们基本上可以说window.event是一个不能用new的构造器,而不单单是一个普通的全局变量,它只会在我们触发了具体事件(onclick,onclick,onload……)中才会生成新的实例。其他情形改来改去只是对一个window.event实例进行操作,另,window.event在DOM树未完成前甚至不存在的!

     
          function xx(){
            var a = window.event;
            alert(a);
          }
          xx();//这时DOM树还没有完成
          window.onload = function(){
            xx();
          }
    

  • 相关阅读:
    部分页面开启宽屏模式
    门户diy实现翻页功能的方法
    git命令详解,从入门到装逼
    array方法常用记载
    vue 生命周期的理解(created && mouted的区别)
    微信小程序传值的几种方式
    data-*
    本地存储和会话存储以及cookie的处理
    vue的安装和项目构建
    进击的UI----------动画
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1689135.html
Copyright © 2011-2022 走看看