JavaScript 事件调用顺序。

最新推荐文章于 2023-11-14 16:19:40 发布
最新推荐文章于 2023-11-14 16:19:40 发布
阅读量1.8k 收藏
点赞数
文章标签： 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

xlong1900
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 事件执行顺序
letusflyinthebluesky的博客
04-20 391
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 137
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 216
js事件执行顺序是js中一个老生常谈的一个话题， 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件，如 <button type="button" onclick="console.log('111')"></button> 结果如下： 此方法不建议使用，有两方面的原因，...
javascript事件执行顺序
ywb201314的专栏
12-08 430
1. onchange() 事件优先于onblur()事件执行。
js中的事件执行顺序梳理
WANG944282的博客
04-18 8106
js的事件执行顺序梳理
JavaScript链式调用原理与实现方法详解
10-15
JavaScript链式调用是一种常见的编程技巧，特别是在处理对象和类的方法时，它可以使得代码更加简洁、易读。链式调用的基本原理在于，当一个对象的方法执行完毕后，该方法内部返回自身引用（即 `return this`），这样...
javascript按顺序加载运行js方法
10-18
当`defer`属性被设置时，浏览器会在文档解析完成后，但在`DOMContentLoaded`事件触发之前，按照脚本在文档中出现的顺序执行这些脚本。这样可以确保脚本按顺序执行，但允许文档的其余部分在脚本执行前加载。 2. `...
JavaScript事件冒泡与事件捕获实例分析
10-18
依次输出：div、p4、事件处理程序的执行顺序在JavaScript中，事件处理程序的执行顺序取决于事件的传播方式（冒泡或捕获）以及它们是如何被添加到元素上的。如果同时使用了事件捕获和冒泡，那么捕获阶段的事件处理...
JavaScript调用Activex控件的事件的实现方法
10-29
JavaScript调用ActiveX控件的事件的实现方法是客户端编程中的一个重要技巧，特别是在与旧版浏览器或特定系统交互时。ActiveX控件是微软的一种技术，允许在网页中嵌入可执行代码，常用于访问本地资源或提供特殊功能。...
详解JavaScript 事件流
11-19
想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 事件流 事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的...
Js 事件调用顺序。
08-17 4383
2006-03-24 12:55:21 J
javascript 事件循环、任务执行顺序
chelflan's blog
05-18 1804
javascript 事件循环 可以先来看这样的一段代码, 可以思考下会输出什么结果: console.log('event start') setTimeout(function () { console.log('setTimeout'); }); new Promise(function(resolve,reject){ console.log('promise start...
前端深入之js事件执行顺序
m21211314的博客
07-02 509
事件分为 同步 和 异步 同步任务在执行过程中会有一个执行栈 1. 执行主宏任务，即为 主线程的同步任务 ，遇到异步任务，先放入event loop 事件队列当中， 微任务优先，因为主任务也属于宏任务。 2. 执行完所有的同步任务之后 进入 event loop当中 异步任务 分为宏任务(macro-task)、微任务(micro-task) macro-task 常用： s...
js事件执行顺序小例子
zoepriselife316的博客
01-08 127
直接上代码，保存为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 1650
一. 问题 如果一个元素和它的祖先元素注册了同一类型的事件函数(例如点击等), 那么当事件发生时事件函数调用的顺序是什么呢? 比如, 考虑如下嵌套的元素: ----------------------------------- | outer | | ------------------------- | | |inner ...
js代码执行顺序简单介绍,详细说明js的执行过程
最新发布
阿发狗伪原创
11-14 497
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
JS事件之事件流机制
每天进步一点点
05-11 6075
众所周知JS和HTMl元素的交互几乎都是通过“事件”来完成的，事件从触发到完成响应一般分为3个阶段：捕获阶段，目标阶段，和冒泡阶段。 那么事件是在捕获阶段响应 还是在冒泡阶段响应那？？ 我们是可以手动设置事件是在捕获阶段响应还是在冒泡阶段响应。   理解JS的事件流机制对充分理解JS的事件至关重要，那么什么是JS的事件流那？？ 事件流： 可以理解为当事件发生时，响应事件的顺序。这个顺序就
【JS不正经学习】--JS执行原理，事件循环
houwhu的博客
12-01 842
一、js的执行机制 众所周知：JavaScript 是一门单线程语言，因为是单线程，所以代码应该是自上而下执行的，事实是不是如此，先看下列一段代码： setTimeout(() => { console.log('set1') }); new Promise((resolve, reject) => { console.log('p1'); resolve(); }).then(() => { console.log('then1')
Javascript的加载与执行顺序
热门推荐
一土宁的博客
03-31 3万+
1. 按块加载并执行对于一个HTML文档，浏览器的解析顺序为：按照文档流，从上到下逐步解析页面的结构。JavaScript代码作为通过标签嵌入或引入的脚本，也HTML文档的组成部分。因此，JavaScript代码在装载时的执行顺序也是根据脚本标签&lt;script&gt;的出现顺序来确定的。但是，浏览器加载JavaScript时有个特点，那就是载入之后立即就会执行（先编译后执行），因为JavaS...
webview加载url的调用顺序
05-25
在 Android 中，WebView 加载 URL 的调用顺序大致如下： 1. 调用 WebView.loadUrl() 方法，传入一个 URL 地址。 2. WebView 根据 URL 地址开始加载资源。 3. WebViewClient 的 onPageStarted() 方法被调用，通知...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值