现代事件处理程序和Event对象对浏览器兼容性的判断和解决

时间:2022-08-26 15:11:57

兼容性问题的解决:

因为 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>