zoukankan      html  css  js  c++  java
  • js显示隐藏效果,其中注意了一个事件的应用

    当用JS时候,关于事件应用:

    如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码:

    function doEventThing(eventTag){    
       var event = eventTag||window.event;    
       var currentKey = event.charCode||event.keyCode;    
       var eventSource =window.event.srcElement||eventTag.target;
        
    }

        
      这段代码主要是为了处理键盘事件的,在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口,在上述函数中,
    eventTag扮演的就是这个角色。
      var event = eventTag||window.event;
      这段代码可以根据浏览器的不同来得到正确的event,并在程序中使用,如果在IE4+下面使用这段代码,因为eventTag为null可以保证event = window.event,但是如果在Firefox下运行的话则因为手工的给定了eventTag所以var event = eventTag。根据对这一段代码的分析我们也不难看出可以对doEventThing方法进行如下的改造(因为javascript允许我们在定义function的时候不明确指出参数的数量): 

    function doEventThing(){    
        var event = arguments[0]||window.event;    
         //other code    

      
      在Firefox下arguments[0]在特定的场合(没有显式的指定function参数数量的时候)被做为传播事件的参数来使用…………
      至于var currentKey = event.charCode||event.keyCode;也是不同的浏览器所致,在IE4+下面记录键盘的是keyCode,但是在Firefox下的却是charCode,为此我们需要处理他们的差异。
      还有一个差异就是事件源的获取:通过语句
      var eventSource = window.event.srcElement||eventTag.target;
      我们也看到了IE与W3C的不同。
      经过上面的包装,我们基本上可以在IE4+和Firefox下面顺利的使用事件机制了,当然如果为了通用性可以对这种差异进封装来形成自己的Event对象在程序中误差别的使用事件对象,这里就不在介绍了。 
       
      接下来分析事件的绑定:大概分为如下5种
      1、绑定到元素,这也是比较常见的一种比如: 
      <input type="button" onclick="doEventThing(event)">   
    ,这样我们就把doEventThing绑定到了该button对象上,点击此按钮事件就被触发。
      2、绑定事件到对象:这也是比较常见的一种,特别是在IE4+下面:
      document.getElementById("divid").onclick = doEventThing;
      3、使用<script for>进行事件的绑定,这只在IE4+下有用(为buttong1绑定事件,逻辑在script块中书写event来指定怎么触发事件):

    <script event="onclick" for="button1">
     // script statements here
    </script>

     
       4、使用 IE5/Windows 的 attachEvent() 方法     
       5、使用 W3C DOM 的 addEventListener() 方法
      addEventListener("eventType",listenerReference,captureFlag);
      第三个参数则是一个 Boolean 值,指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说,第三个参数应该为false(假)。

      prototype在绑定事件的时候兼容IE和W3C的时候做的处理如下: 

    _observeAndCache: function(element, name, observer, useCapture) {    
       if (!this.observers) this.observers = [];    
       if (element.addEventListener) {//W3C DOM    
         this.observers.push([element, name, observer, useCapture]);    
         element.addEventListener(name, observer, useCapture);    
       } else if (element.attachEvent) {//IE5/Windows    
         this.observers.push([element, name, observer, useCapture]);    
         element.attachEvent(’on’ + name, observer);    
       }    
    }

       
    撇开this.observers.pust([element,name,observer,useCapture])不谈,我们对4、5所说的事件绑定就很清楚了。我们知道prototype的此方法的useCapture在IE下没有作用,只对W3C的事件处理机制起作用。

    <body>

    <div  id="demoC">
    <img src="imgs/pic1_26.gif" width="274" height="127" alt="dd" style="cursor:hand;" />
    <img src="imgs/homeflash.gif" width="268" height="130" alt="dfdfd" style="cursor:hand;" />
    </div>
    <div id="enlarge_images">
    </div>

    <script type="text/javascript" language="javascript"> 
    var demoObj = document.getElementById("demoC");
    var gg = demoObj.getElementsByTagName("img");
    var ei = document.getElementById("enlarge_images");
    for(i=0; i<gg.length; i++)
    {

     var ts = gg[i];
       ts.onclick = function(event)
       {
     
      event = event || window.event;
      debugger
      if(ei.style.display != "block")
       {
        
       ei.style.display = "block";
       ei.innerHTML = '<img src="' + this.src + '" />';           
        }
      else
      {
       ei.innerHTML="";
       ei.style.display="none";
          }  
     } 
    }
    </script>
    </body>

  • 相关阅读:
    git提交本地代码到远程服务器
    报错 D:Program Files odejs ode_cache\_logs2019-05-07T07_07_30_992Z-debug.log
    vue项目中使用插件将字符串装化为格式化的json数据(可伸缩)
    odoo官方文档第二章 Data Files
    odoo官方文档第一章 ORM
    odoo模块的创建 openacademy学习笔记
    mysql存储过程的学习(二)
    mysql存储过程的学习(一)
    linux 进入mysql的常用命令(转)
    Dubbo入门学习(转)
  • 原文地址:https://www.cnblogs.com/yhongl/p/3937954.html
Copyright © 2011-2022 走看看