首页 > 代码库 > 浏览器的事件处理机制

浏览器的事件处理机制

2024-09-16 12:27:50   218人阅读

 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 = http://www.mamicode.com/null;
    xhr.onreadystatechange = function(){
        console.log(2);
        data = http://www.mamicode.com/xhr.responseText;
    }
    console.log(data);
    console.log(3);
控制台打印：
1
3
2

浏览器的事件处理机制


联系
我们