zoukankan      html  css  js  c++  java
  • attachEvent 与 addEventListener 的监听

       说到 attachEvent 与 addEventListener 的事件必然会提到  浏览器的判断,因为attachEvent只适用于于IE

       先来看看常用的浏览器的判断 

    //判断浏览器类型  
    if(navigator.userAgent.indexOf("MSIE")>0) { 
    return "MSIE"; 
    } 
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
    return "Firefox";  //火狐
    } 
    if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
    return "Safari";   //苹果
    }  
    if(isChrome=navigator.userAgent.indexOf("Chrome")>0) { 
    return "Chrome";   //谷歌
    }

     接下来就有了 监听事件

        if (navigator.userAgent.indexOf("MSIE") > 0) {
                  document.getElementById('txtABC').attachEvent("onpropertychange", txtChange);
              }
        else if (navigator.userAgent.indexOf("Firefox") > 0) {
             document.getElementById('txtABC').addEventListener("input", txtChange, false);                  

           }

     一起来看看addEventListener 的参数

      1:事件名称:click, blur 等事件名称,注意事件名不要带"on"。 在IE 下 才会使用 onclick,也就是 使用attachEvent 事件监听的时候才用加On。

          2: 绑定的函数 txtChange 不要加括号。

          3: 布尔值,表示事件的响应顺序。当为false时为冒泡获取(由里向外),true时 方式(由外向里)。

     当然

    document.getElementById('txtABC').attachEvent("onpropertychange", txtChange);

    方式 也可以使用jquery 来绑定事件 效果是一样的。

    $("#txtArticleName").bind('propertychange', function() {
            txChange();
      });

    这时候就会有一个问题出现,使用多个浏览器 就要写多个判断。

    那么我们就换一种思路。使用键盘监听:

                ////////  给txtArticleName绑定键盘事件
                $("#txtArticleName").bind("keydown", function() {
                        txtChange();
                    }

                });

    大部分浏览器都支持,keydown事件,所以这么写可以兼容大部分浏览器.这样 代码,看起来更简洁。

  • 相关阅读:
    如何打造优秀的电商网页,吸引更多人“买买买”?
    快速排序
    JUnit单元测试
    算法学习(归并排序)
    用于理解Java的前8个图表
    时间与字符串的转化
    spring 的 切片Aspect
    过滤器 ;spring拦截器 切片 小结
    spring data jpa 注解
    mysql 解除安全模式
  • 原文地址:https://www.cnblogs.com/dragon-L/p/3604721.html
Copyright © 2011-2022 走看看