zoukankan      html  css  js  c++  java
  • Javascript 的addEventListener()及attachEvent()对比

    Mozilla中: 

    addEventListener的使用方式: 

    target.addEventListener(type, listener, useCapture); 

    target: 文档节点、document、window 或 XMLHttpRequest。 
    type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
    listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 
    useCapture :是否使用捕捉,一般用 false 。

    例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 

    IE中: 

    target.attachEvent(type, listener); 
    target: 文档节点、document、window 或 XMLHttpRequest。 
    type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 
    listener :实现了 EventListener 接口或者是 JavaScript 中的函数例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 

    W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: 



    w3c  : removeEventListener(event,function,capture/bubble); 

    Windows IE的格式:detachEvent(event,function); 


    target.addEventListener(type, listener, useCapture); 
    target 文档节点、document、window 或 XMLHttpRequest。 
    type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
    listener 实现了 EventListener 接口或者是 JavaScript 中的函数。 
    useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false 
    事件触发时,会将一个 Event 对象传递给事件处理程序,比如: 
    document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 
    适应的浏览器版本不同,同时在使用的过程中要注意 
    attachEvent方法 按钮onclick IE中使用 
    addEventListener方法 按钮click fox中使用 
    两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: 
    attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) 
    addEventListener方法 用于 Mozilla系列 
    举例: 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"); 
    //element.addEventListener(type,listener,useCapture); 
    btn1Obj.addEventListener("click",method1,false); 
    btn1Obj.addEventListener("click",method2,false); 
    btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3

  • 相关阅读:
    JavaScript模态对话框类
    事件模块的演变(1)
    html5中可通过document.head获取head元素
    How to search for just a specific file type in Visual Studio code?
    What do 'lazy' and 'greedy' mean in the context of regular expressions?
    正则非获取匹配 Lookahead and Lookbehind ZeroLength Assertions
    regex length 正则长度问题
    Inversion of Control vs Dependency Injection
    How to return View with QueryString in ASP.NET MVC 2?
    今天才发现Google Reader
  • 原文地址:https://www.cnblogs.com/dubaokun/p/3401301.html
Copyright © 2011-2022 走看看