zoukankan      html  css  js  c++  java
  • 现代事件处理程序和Event对象对浏览器兼容性的判断和解决

    兼容性问题的解决:

    因为 IE 和 DOM 对于现代事件处理程序指派的方式不同,为了保证我们编写的代码在 IE 和 DOM浏览器系列下都能用,我们可以用如下代码来解决兼容性问题:

      var fnClick1 = function() {

        aleart("我被点击了";)

      }

      var fnClick2 = function() {

        aleart("我也被点击了";)

      }

      var oDiv = document.getElementById("div1");

      if (document.addEventListener) {     //DOM

        oDiv.addEventListener("click", fnClick1, true);

        oDiv.addEventListener("click", fnClick2, true);

      }

      else if (document.attachEvent) {      //IE

               oDiv.attchEvent("onclick", fnClick1);

        oDiv.attchEvent("onclick",fnClick2);

      }

    如果在IE下,document.addEventListener返回的是undefined,那么(document.addEventListener),这个逻辑表达式的值就是false。

    同样,如果是在FireFox等支持的DOM2的浏览器下,document.attEvent返回的是undefined.通过类似的方法,我们可以解决浏览器兼容问题。

    (IE 5.0 7.0 8.0 只支持IE;  IE 9.0  10.0 两种都支持;  IE 11.0只支持DOM; 其他浏览器只支持DOM)

    Event对象:

    在IE浏览器中,event对象是window对象的一个属性。

    这意味着事件处理程序必须按照如下方式访问event对象:

      oDiv.onclick = function () {

        var oEvent = window.event;

      }

    即使event对象是window对象的一个属性,它也只能在事件发生时才可以访问。在所有事件处理程序执行后,event对象就被销毁了。

    DOM标准中规定:event对象只能做为仅有的参数传给事件处理程序。所以,为了在DOM兼容的浏览器中(例如:Mozilla、Safari、Opera)访问event对象,必须按照如下代码来访问:

      oDiv.onclick = function () {

        var oEvent = atguments[0];

      }

    当然,我们也可以按照如下方法给参数一个名字:

      oDiv.onclick = function (oEvent) {

      }

    为了正确地使用event对象,我们就必须先判断浏览我们网页的浏览器的类型,如下代码演示了一种简单的判断浏览器类型的方法:

      <html>

        <head>

          <title>跨浏览器编程</title>

          <script type="text/javascript">

            function browserType(oEvent) {

              if (window.event) {                   //判断是不是IE 

                document.getElementById("p1").innerHTML = "IE";

              }

              else if (oEvent) {        //判断是不是DOM

                document.getElementById("p1").innerHTML = "DOM";

              }

            }

          </script>

        </head>

        <body>

          <p onclick="browserType(event);">Hello,JS!</p>

          <p id="p1">用的什么浏览器呢?</p>

        </body>

      </html>

  • 相关阅读:
    Pycharm2017应用小技巧
    浅谈哈希表
    攻克网页文字不可复制的难题
    Java中List的相关知识
    电脑实用小技巧
    Jme3涉及的eclipse知识
    Word2010撤销按钮失效,Ctrl+Z失效解决办法
    Word文档中怎么删除空白页?删除空白页的六种方法
    word中分栏后文字均匀的分布在了左右两栏,而不是填满左栏再填右栏,怎么办?
    visdom服务启动时提示Downloading scripts, this may take a little while解决办法
  • 原文地址:https://www.cnblogs.com/LisaY/p/4737522.html
Copyright © 2011-2022 走看看