JavaScript 事件调用顺序。

最新推荐文章于 2024-03-11 19:12:02 发布
最新推荐文章于 2024-03-11 19:12:02 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Java/Jsp/JS 文章标签： javascript function div firefox opera html
 在 javascript 中两种方式注册的监听器以及先后注册的监听器调用的顺序在各个浏览器都有所不同，在这里总结一下 IE、firefox 以及 Opera 三种浏览器的调用方式：

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

FireFox:
不管何种方式，都是先注册的先执行。
但是 body 很奇怪，Html 标记里用属性注册的事件总是在最后执行（<body οnmοusedοwn="func()"），而且是在所有事件的最后（居然在 document 的后面！）。但是 js 语句注册的属性事件按上述规则执行（document.body.οnmοusedοwn=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 方式不怎么合理，后注册的事件会在最先运行，无法把握程序运行次序。

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

 

相关地址:

http://www.mmommo.com/?id=63

JS 事件捕获、事件冒泡、事件委托
一只路过的小码农
03-11 2358
JS 事件机制
JavaScript 事件执行顺序
letusflyinthebluesky的博客
04-20 447
console.log(1); var promise = new Promise((resolve) => { console.log(2); resolve(3); }); promise.then((val) => console.log(val)); setTimeout(()=>{console.log(4)},0); console.log(5) ...
js事件执行顺序
WEBCODE
01-16 201
IE8,chrome16,firefox5,safari5,opera11.60 同一个元素上绑定多个事件时处理顺序是一致的，都是先注册先执行！ 例: &lt;form id="loginForm" action="ajax.php" method="POST" onsubmit="alert(1);return false;"&gt; &lt;input id="username&
关于js事件执行顺序小技巧
azhuyan0659的博客
08-15 268
js事件执行顺序是js中一个老生常谈的一个话题， 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件，如 <button type="button" onclick="console.log('111')"></button> 结果如下： 此方法不建议使用，有两方面的原因，...
解析ajax事件的调用顺序
10-27
本文将详细介绍在jQuery中AJAX事件的调用顺序。 首先，需要了解的是jQuery中的AJAX方法，如$.ajax()，$.get()，$.post()等。这些方法封装了AJAX请求，并提供了一系列事件回调函数供开发者使用。当AJAX请求被发起时...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
11-29
4. **事件执行顺序**：在同时使用事件冒泡和捕获时，事件处理顺序为捕获阶段->目标阶段->冒泡阶段。也就是说，如果在捕获阶段和冒泡阶段都为同一元素绑定了事件处理函数，那么捕获阶段的函数会先执行。 了解并熟练...
JavaScript调用Activex控件的事件的实现方法
12-08
JavaScript调用ActiveX控件的事件的实现方法主要涉及到浏览器中的脚本交互和事件处理机制。ActiveX控件是微软提出的一种技术，它允许在网页中嵌入各种组件，如Flash、PDF阅读器等，而JavaScript是网页开发中最常用的...
js中的事件执行顺序梳理
WANG944282的博客
04-18 8381
js的事件执行顺序梳理
js中的事件循环执行顺序
m0_54741495的博客
12-27 787
js事件循环
js中的事件执行顺序
最新发布
mcdcakfke的博客
03-11 660
指按照顺序执行的任务，每个任务必须等待前一个任务完成后才能执行。在同步任务中，程序会一直等待某个任务的完成，然后再继续执行下一个任务。这种方式可以确保任务的执行顺序和结果的可靠性，但是如果某个任务执行时间较长，会导致整个程序的执行效率降低。指不按照顺序执行的任务，每个任务可以独立执行，不需要等待其他任务的完成。在异步任务中，程序会继续执行下一个任务，而不会等待当前任务的完成。这种方式可以提高程序的执行效率，特别是在处理一些耗时的操作时，可以将这些操作放在后台执行，不会阻塞程序的其他操作。
javascript事件执行顺序
ywb201314的专栏
12-08 502
1. onchange() 事件优先于onblur()事件执行。
js【深度解析】代码的执行顺序
朝阳39的博客
03-09 2266
我们将每一句要执行的 js 代码当做一个任务，则 js 代码可以按照其执行方式的不同，按下图分类微任务：被放入微任务队列（micro task queue）中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务：被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。
Js 事件调用顺序。
08-17 4442
2006-03-24 12:55:21 J
javascript 事件循环、任务执行顺序
chelflan's blog
05-18 1874
javascript 事件循环 可以先来看这样的一段代码, 可以思考下会输出什么结果: console.log('event start') setTimeout(function () { console.log('setTimeout'); }); new Promise(function(resolve,reject){ console.log('promise start...
前端深入之js事件执行顺序
m21211314的博客
07-02 577
事件分为 同步 和 异步 同步任务在执行过程中会有一个执行栈 1. 执行主宏任务，即为 主线程的同步任务 ，遇到异步任务，先放入event loop 事件队列当中， 微任务优先，因为主任务也属于宏任务。 2. 执行完所有的同步任务之后 进入 event loop当中 异步任务 分为宏任务(macro-task)、微任务(micro-task) macro-task 常用： s...
js事件执行顺序小例子
zoepriselife316的博客
01-08 170
直接上代码，保存为js，node 该代码，命令行即可看执行结果 //整体script作为一个宏任务。 console.log('1'); //直接执行 1 // 整体script作为宏任务，结束后，进入到这个宏任务中， //放到宏任务1 event Queue setTimeout(function () { console.log('2'); //会先输出2 process.nextTick(function () { // 放入微任务Queue1下的--记为Q1-then
JS中的事件顺序(事件捕获与冒泡)
weixin_34278190的博客
03-16 1963
一. 问题 如果一个元素和它的祖先元素注册了同一类型的事件函数(例如点击等), 那么当事件发生时事件函数调用的顺序是什么呢? 比如, 考虑如下嵌套的元素: ----------------------------------- | outer | | ------------------------- | | |inner ...
js代码执行顺序简单介绍,详细说明js的执行过程
阿发狗伪原创
11-14 600
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
JavaScript代码执行顺序解析
了解JavaScript的执行顺序对于编写高效、无冲突的代码至关重要，尤其是在处理异步操作、事件绑定以及优化页面性能时。正确理解这些概念能够帮助开发者更好地控制代码的执行流程，避免出现意外的错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值