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

浏览器的事件处理机制

 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

浏览器的事件处理机制