• (转载)JS事件监听 JS:attachEvent和addEventListener使用方法


    (转载)http://www.chhua.com/web-note146

    attachEvent和addEventListener使用方法

    Js代码

    <html>
    <head>
    <title>JS</title>
    </head>
    
    <body>
    <input id="para" type="text"/>
    <script>
        function test()
        {
            alert("test");
        }
        function pig()
        {
            alert("pig");
        }
    
        window.onload = function()
        {
            var element = document.getElementById("para");
            if (element.addEventListener)
            {
                element.addEventListener("focus", test, false);
                element.addEventListener("focus", pig, false);            
            }
            else
            {
                element.attachEvent("onfocus", test);
                element.attachEvent("onfocus", pig);        
            }
        }
    </script>
    </body>
    </html>

    ****************实例结束**************************

    JS:attachEvent和addEventListener 使用方法

    attachEvent与addEventListener区别

    适应的浏览器版本不同,同时在使用的过程中要注意

    attachEvent方法          按钮onclick

    addEventListener方法    按钮click

    两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:

    attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) 

    addEventListener方法 用于 Mozilla系列

    举例:

    Js代码

    document.getElementById("btn").onclick = method1;
    document.getElementById("btn").onclick = method2;
    document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
    写成这样:

    var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
    btn1Obj.attachEvent("onclick",method1);
    btn1Obj.attachEvent("onclick",method2);
    btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1


    如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById(“btn1&#8243;);
    //element.addEventListener(type,listener,useCapture);
    btn1Obj.addEventListener("click",method1,false);
    btn1Obj.addEventListener("click",method2,false);
    btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
    使用实例:

    Js代码

    1。 var el = EDITFORM_DOCUMENT.body;
    //先取得对象,EDITFORM_DOCUMENT实为一个iframe
    if (el.addEventListener){
    el.addEventListener('click', KindDisableMenu, false);
    } else if (el.attachEvent){
    el.attachEvent('onclick', KindDisableMenu);
    }2。 if (window.addEventListener) {
    window.addEventListener('load', _uCO, false);
    } else if (window.attachEvent) {
    window.attachEvent('onload', _uCO);
    }

    detachEvent和removeEventListener

    Js代码

    detachEvent('onclick', func);//ie下使用删除事件func
    removeEventListener('click', func);//Mozilla下,删除事件func 

  • 相关阅读:
    问题描述:判断一个整数 n 是否为 2 的幂次方
    C#的关键字Explicit 和 Implicit
    .NET写入文件操作
    C# Main函数详解
    SpringBoot增加过滤XSS脚本攻击
    Hutool工具包导出Excel文件异常 You need to add dependency of poi-ooxml to your project
    微信H5表单点击输入框提示防欺诈盗号,请勿支付或输入qq密码
    RedisTemplate执行lua脚本在Redis集群模式下报错EvalSha is not supported in cluster environment.
    SpringBoot使用RedisTemplate+Lua脚本实现Redis分布式锁
    SpringBoot使用Thymeleaf打成jar包部署找不到页面
  • 原文地址:https://www.cnblogs.com/Robotke1/p/3230478.html
Copyright © 2020-2023  润新知