zoukankan      html  css  js  c++  java
  • 在各浏览器中动态添加事件-方法篇

    在 HTML 中可以直接写事件代码,比如:<input type="button" value="验证" onclick="javascript:Verify();" />,这在各浏览器中的解释均相同,无可争议。

    但往往我们又需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。

    方法一、setAttribute

    var obj = document.getElementById("obj");
    obj.setAttribute("onclick", "javascript:alert('测试');");

    这里利用 setAttribute 指定 onclick 属性,简单,很好理解,但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、class、onclick、onmouseover 这些属性在 IE 中是行不通的。

    方法二、用 attachEvent 和 addEventListener(推荐)

    IE 支持 attachEvent

    obj.attachEvent("onclick", Foo);
    function Foo()
    {
        alert("测试");
    }
    //也可写在一起,如下:
    obj.attachEvent("onclick", function(){alert("测试");});

    其它浏览器支持 addEventListener

    obj.addEventListener("click", Foo, false);
    function Foo()
    {
        alert("测试");
    }
    //也可写在一起,如下:
    obj.addEventListener("click", function(){alert("测试");}, false);

    注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。

    综合起来:

    if (window.attachEvent)
    {
        //attachEvent 代码
    }
    else
    {
        //addEventListener 代码
    }

    顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true,则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。更详细的解释,请参见 addEventListener 的第三个参数 useCapture

    方法三、事件 = 函数名或函数

    obj.onclick = FuncName;
    function FuncName()
    {
        alert("go");
    }
    //也可以写在一起,如下:
    obj.onclick = function (event) { alert("go"); };

    这在多个浏览器中均支持,这是属于旧的规范(方法二属于 DOM2 的规范),不过由于使用方便,用的场合也比较多。 

  • 相关阅读:
    str_replace函数的使用规则和案例详解
    phpqrcode.php 生成二维码图片用于推广
    常用的正则表达式验证
    Java:原生javaWeb下载pdf文件
    设计模式:七大原则
    Spring Boot:整合Hikari+Oracle+p6spy
    Spring Boot:开启全局事务
    Java8:按照对象的属性,对List集合分组
    SpringMVC统一异常处理
    JSR303校验的基本使用和结合AOP使用
  • 原文地址:https://www.cnblogs.com/chenlulouis/p/1585806.html
Copyright © 2011-2022 走看看