浏览器的事件处理机制
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器的事件处理机制相关的知识，希望对你有一定的参考价值。
js的运行是单线程的
一、浏览器在执行的时候会把某些代码放进事件队列
什么代码会进入事件队列：
1、定时函数
2、事件函数
3、ajax的回调函数
二、事件队列中的任务执行是有条件的：（主线程必须是空闲的）
1、定时函数的触发事件（到达延时事件）
2、事件函数的触发条件（特定的事件发生）
3、ajax回调函数的触发条件（服务器有数据响应：xhr.readyState状态发生变化饿时候出发）
| 1、定时函数 |
console.log(10);
for(var i = 0; i <5; i++) {
setTimeout(function () {
console.log(i);
},4000);
}
console.log(30);
|
控制台打印：
10
30
5个3-----主线程结束的后4秒后打印
|
| 2、事件函数 |
window.onload = function () {
console.log(10);
document.getElementById(‘btn‘).onclick = function () {
console.log(20);
};
console.log(30);
};
|
控制台打印：
10
30
20----点击的时候打印
|
| 3、ajax的回调函数 |
var xhr = new XMLHttpRequest();
xhr.open();
xhr.send();
console.log(1);
var data = null;
xhr.onreadystatechange = function(){
console.log(2);
data = xhr.responseText;
}
console.log(data);
console.log(3);
|
控制台打印：
1
3
2
|
以上是关于浏览器的事件处理机制的主要内容，如果未能解决你的问题，请参考以下文章