zoukankan      html  css  js  c++  java
  • javascript 事件调用顺序

    from: http://www.aspxuexi.com/javascript/2007-2-24/2222.htm

    在 javascript 中两种方式注册的监听器以及先后注册的监听器调用的顺序在各个浏览器都有所不同,在这里总结一下 IE、firefox 以及 Opera 三种浏览器的调用方式:

    IE:
    通过属性注册的事件最先执行。
    attachEvent 方式注册的事件后注册的先执行。

    FireFox:
    不管何种方式,都是先注册的先执行。
    但是 body 很奇怪,Html 标记里用属性注册的事件总是在最后执行(<body onmousedown="func()"),而且是在所有事件的最后(居然在 document 的后面!)。但是 js 语句注册的属性事件按上述规则执行(document.body.onmousedown=func)。

    Opera:
    不管何种方式,都是先注册的先执行。

    测试下面代码

    <html>
    <script>
    function bodyLegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>body legacy event onmousedown";
    }
    function div1LegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>div1 legacy event onmousedown";
    }
    function documentLegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>document legacy event onmousedown";
    }

    function div0LegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>div0 legacy event onmousedown";
    }
    function mouseDown1(){
    document.getElementById("info").innerHTML+="<br/>body mouseDown 1";
    }
    function mouseDown2(){
    document.getElementById("info").innerHTML+="<br/>body mouseDown 2";
    }
    function documentMouseDown(){
    document.getElementById("info").innerHTML+="<br/>documentMouseDown";
    }
    function div1MouseDown(){
    document.getElementById("info").innerHTML+="<br/>div1 mouseDown";
    }
    function init(){
    if(document.all){
    document.body.attachEvent("onmousedown",mouseDown1);
    document.body.attachEvent("onmousedown",mouseDown2);
    document.attachEvent("onmousedown",documentMouseDown);
    document.getElementById("d1").attachEvent("onmousedown",div1MouseDown);
    }else{
    document.body.addEventListener("mousedown",mouseDown1,false);
    document.body.addEventListener("mousedown",mouseDown2,false);
    document.addEventListener("mousedown",documentMouseDown,false);
    document.getElementById("d1").addEventListener("mousedown",div1MouseDown,false);
    }

    document.onmousedown=documentLegacyEvent;
    }
    </script>
    <body onload="init()" onmousedown="bodyLegacyEvent()">
    <div id="d0" onmousedown="div0LegacyEvent()">
    <div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div>
    </div>
    <div id="info"></div>
    </body>
    </html>

    改用 js 动态注册 body 的属性事件,并且在最前面注册属性事件:

    <html>
    <script>
    function bodyLegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>body legacy event onmousedown";
    }
    function div1LegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>div1 legacy event onmousedown";
    }
    function documentLegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>document legacy event onmousedown";
    }

    function div0LegacyEvent(){
    document.getElementById("info").innerHTML+="<br/>div0 legacy event onmousedown";
    }
    function mouseDown1(){
    document.getElementById("info").innerHTML+="<br/>body mouseDown 1";
    }
    function mouseDown2(){
    document.getElementById("info").innerHTML+="<br/>body mouseDown 2";
    }
    function documentMouseDown(){
    document.getElementById("info").innerHTML+="<br/>documentMouseDown";
    }
    function div1MouseDown(){
    document.getElementById("info").innerHTML+="<br/>div1 mouseDown";
    }
    function init(){
    document.onmousedown=documentLegacyEvent;
    document.body.onmousedown=bodyLegacyEvent;
    if(document.all){
    document.body.attachEvent("onmousedown",mouseDown1);
    document.body.attachEvent("onmousedown",mouseDown2);
    document.attachEvent("onmousedown",documentMouseDown);
    document.getElementById("d1").attachEvent("onmousedown",div1MouseDown);
    }else{
    document.body.addEventListener("mousedown",mouseDown1,false);
    document.body.addEventListener("mousedown",mouseDown2,false);
    document.addEventListener("mousedown",documentMouseDown,false);
    document.getElementById("d1").addEventListener("mousedown",div1MouseDown,false);
    }

    }
    </script>
    <body onload="init()">
    <div id="d0" onmousedown="div0LegacyEvent()">
    <div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div>
    </div>
    <div id="info"></div>
    </body>
    </html>

    比较三个浏览器里面的事件执行顺序,Firefox 和 Opera 比较相似,FireFox 仅在 body 元素上有点不符合常理,实际上我感觉要么是我还找不到规律,要么 FireFox 在处理 body 标记的属性事件上存在 bug。IE 的处理个人认为采用 stack 方式不怎么合理,后注册的事件会在最先运行,无法把握程序运行次序。

    总结:避免和事件执行循序相关的代码,尽量让事件执行的顺序和程序流程无关。

    from:asp学习网/title:javascript 事件调用顺序/ time:2007-2-24 21:10:29

  • 相关阅读:
    Leetcode 16.25 LRU缓存 哈希表与双向链表的组合
    Leetcode437 路径总和 III 双递归与前缀和
    leetcode 0404 二叉树检查平衡性 DFS
    Leetcode 1219 黄金矿工 暴力回溯
    Leetcode1218 最长定差子序列 哈希表优化DP
    Leetcode 91 解码方法
    Leetcode 129 求根到叶子节点数字之和 DFS优化
    Leetcode 125 验证回文串 双指针
    Docker安装Mysql记录
    vmware虚拟机---Liunx配置静态IP
  • 原文地址:https://www.cnblogs.com/emanlee/p/1359617.html
Copyright © 2011-2022 走看看