JavaScript的事件处理函数是同步执行的, 不是异步

本文探讨了事件机制并非异步的过程,通过示例代码展示了事件触发与事件处理函数执行的同步关系,与Ajax回调函数的异步执行进行了对比。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[size=medium]
特别提出一点, 触发事件并执行事件处理函数是一个同步过程,不是异步过程. 所以事件机制并不是异步的.如果你对这句话,有疑问, 请自行编写代码验证,以前我总认为事件机制异步的, 但不是, 如下所示, [/size]

function testSynchronousEventHandler() {
var event1 = new CustomEvent("event1", {
detail : {
message : "event1 handler",
time : new Date(),
},
bubbles : true,
cancelable : true
}), event2 = new CustomEvent("event2", {
detail : {
message : "event2 handler",
time : new Date(),
},
bubbles : true,
cancelable : true
});

this.addEventListener("event1", function(e) {
console.log(e.detail.message);
}, false);

this.addEventListener("event2", function(e) {
console.log(e.detail.message);
}, false);

this.dispatchEvent(event1);
console.log('after event1')
this.dispatchEvent(event2);
console.log('after event2')
}


[size=medium]上面的代码在chrome里面的(IE9以下不支持customer event)执行结果是:
event1 handerl
after event1
event2 handler
after event2

绝对不会是: after event1 出现在event1 handler 前面, 因为事件触发是一个同步过程,不是触发了,先执行后面的代码,再执行事件处理函数里面的代码, Ajax的callback函数执行是异步的,那是因为需要与服务器打交道,所以js会先执行后面的代码,等ajax结果返回时,再执行callback函数里面的代码, 但是事件触发机制本身不是异步的. [/size]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值