JS 机制

JavaScript 流事件

• 冒泡型 Bubble 自下而上(查找当前元素的父元素)
• 捕获型 自上而下(查找当前元素的父元素)
  设置
  1.useCapture=true 为捕获 false 为冒泡
  2.window.event.cancelBubble=true 为捕获 false为冒泡
  3.stopPropagation......

<div id='id1'>
   <div id='id2'>
      <div id='id3'>
        </div id='id4'>
</div></div></div></div>
<script>
$document.getElementId('id1').addEventListener(
'click',
function(){console.log(''test)},
true);
$document.getElementId('id1').addEnventListener(
'click',
function(){console.log(''test1)},
true);
$document.getElementId('id2').addEnventListener(
'click',
function(){console.log(''test2)},
true);
$document.getElementId('id3').addEnventListener(
'click',
function(){console.log(''test3)},
true);
</script>

---

JavaScript 单线程 Event Loop

javascript 是单线程,但是Html5允许建立多线程,但是不允许操作dom,所以本质上还是单线程来显示控件的更新;
回调函数,timeout回调,ajax回调等都是由浏览器多开的线程,将即将执行的回调函数加入到EventLoop里,浏览器是多线程的.

首先是执行javascript的执行栈,
(遇到调用一些api或者回调时,加入事件到 event loop 事件队列)
其次 执行事件队列里面的事件;
周而复始,浏览器是事件驱动型 Event-Driven

Paste_Image.png

Node.js 机制(单线程)

增加了process.nextTick(在执行栈和event loop之间建立);
增加了setImmediate(在Event Loop 尾部添加一个事件)
与setTimeout(func(){},0)原理一样;

Paste_Image.png