js 异步和事件的执行问题

来源：互联网发布：硬盘使用寿命知乎编辑：程序博客网时间：2024/05/24 06:16

代码：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="./style.css"></head><body><div class="box" id="aa">123aaaaaasdasdsadsadsadsadsadassssssssssssssssdasdasdasdasdasdddddddddddddd<div id="ee">444<div id="tt">555</div></div></div><script src="js/common.js"></script></body></html>

window.onload = function(){var box = document.getElementById('aa');addEvent(box,'click',function(){alert('ysx');});addEvent(box,'click',toBlue);}function toBlue(){this.className = 'pox';addEvent(this,'click',toRed);}function toRed(){this.className = 'box';addEvent(this,'click',toBlue);}function addEvent(obj,type,fn){var saved = null;if(typeof obj['on'+type] == 'function')saved = obj['on'+type];obj['on'+type] = function(){if(saved)saved();fn.call(this);}}

//流程整理：
前期肯定是有预编译期和执行期，这些先不讨论了就，主要说的是这段代码的执行流程
1.是页面加载完成后获取box对象，然后执行函数调用addEvent函数

2.进入addEvent函数，顺序执行，直到遇到一个点击事件后，此时异步执行开始，function(){if(saved)saved();fn.call(this);}这段函数是异步去执行，并且把执行后的结果存在消息队列中，等待主进程来获取消息

3.主进程继续执行下一个addEvent函数调用，然后重复步骤2，因为是同一元素的同一事件，所以在消息队列中只会存在一个事件消息，可以想象成指针（每次让onclick指向堆内存中不同的函数，最后肯定只会执行第一个，但是如果你把对内存中的每个函数都记住自己的上一个，也就是saved指针的功能，相当于一个链表，这样就可以从最早的那个执行了，不会被覆盖）

4.主进程全部执行完成后，等待点击事件发生后，开始在消息队列中获取消息

PS：以上都是自己总结的，肯定漏洞百出，有兴趣的可以讨论一下啊

0 0