同步异步和事件

同步和异步事件

浏览器提供了同步和异步机制 JS是单线程的，提供了两个队列，一个是主队列（放同步代码），一个是异步队列队列池。

同步

所有的代码按顺序执行，每一部分执行完后才能执行下面的代码。

异步

这块代码执行后，可以去做其他事情，等这块代码执行完后，再回来处理这里的事项。

异步性能会比较高
- 回调函数 ajax 定时器时间

区别

先执行同步的代码，再执行异步的代码。
同步代码执行结束后才会去执行异步代码

默认定时器间隔时间 5~10ms

问题

异步回调地狱
全部写成同步又会造成代码阻塞

解决：promise处理 异步代码当成同步来写（可以用async + await解决）

 
  function Promise(callback){  
 

this.x = 1;

callback();

}

Promise

Promise是JS内置的构造函数

参数是一个回调函数
- 回调函数有两个参数：
  - resolve(表示执行成功的回调)
  - reject(表示执行失败的回调)
    then方法 Promise类原型上的方法
then有两个参数
- 第一个是成功回调
- 第二个参数表示失败的回调
then方法的返回值
- Promise类的实例，所以可以继续调用then方法
- //除过报错全成功只有手动抛出异常状态才会变成失败的状态（前提是没有再返回Promise对象）
  Promise有三种状态
第一种是pending（等待状态）
第二种是fulfilled(成功的状态)
第三种是rejected(失败的状态)

事件

事件绑定：事件（行为）发生时做些具体的事情（给事件绑定行为）
绑定事件分为DOM0级事件绑定和 DOM2级事件绑定

DOM0级事件绑定问题：对同一元素，同一事件绑定多个行为时，后面的行为会覆盖前面的行为，最后只会执行最后一次绑定的行为

DOM0级事件绑定
oDiv.onclick = function(){alert(1)}
- 事件行为移除
  oDiv.onclick = null
DOM2级事件绑定
oDiv.addEventListener('click',function(){alert(1)},false);
- 参数1：事件类型
- 参数2：事件绑定的行为
- 参数3：事件传播的方式
  oDiv.removeEventListener('click',fn,false);
IE低版本浏览器6~8：oDiv.attachEvent('onclick',fn);，没有做重复绑定的处理
oDiv.detachEvent('onclick',fn);

DOM2级绑定 addEventListener和attachEvent
IE没有做重复绑定处理。DOM2级事件会对同一个元素绑定同一个事件绑定多次时只绑定一次。
标准浏览器下事件绑定行为中的this是绑定的元素 IE事件绑定行为中是window
IE下事件绑定行为执行的顺序是乱的，而标准浏览器是按照先后绑定的顺序执行

事件对象

浏览器记录了事件相关的信息

//本身存在，用来存储事件相关的信息也可以用arguments[0]接收
标准浏览器放在参数里接收
ie6~8:通过window.event接收
e = e || window.event

 
  let oDiv = document.getElementsByClassName('box')[0];  
 

   oDiv.onclick = 
  function (e) {//本身存在，用来存储事件相关的信息 也可以用arguments[0]接收  
 

console.log(e.clientX);//到可视窗口左边的距离

}

e.clientX：到可视窗口左边的距离
e.clientY：到可视窗口上边的距离
e.pageY ：到文档左边的距离（包含滚动条卷出去的高度） e.clientY + document.documentElement,scrollTop||docment.body.scrollTop
e.target: 事件源事件绑定的元素
e.preventDefault 阻止默认行为
- ie低版本浏览器：e.returnValue = false
e.stopPropagation 阻止冒泡
- ie低版本浏览器：e.cancleBubble = true

事件传播

冒泡和捕获不能同时看到
DOM0级事件只能看到事件冒泡
DOM2级事件可以自己设置冒泡（false）或捕获(true)

事件冒泡

当前元素事件被触发后，其祖先元素的相同事件也会被触发由内往外（先自己后祖先）

事件捕获

当前元素事件被触发后，其祖先元素的相同事件也会被触发由外往内（先自己后祖先）

事件委托

订阅发布模式

让写出的代码具有可维护性，可复用性，可移植性。不再专注于代码本身，而是站在宏观的角度思考代码，想如何规划和管理代码
代码至少满足”低耦合高内聚”
低耦合:每个模块之间的代码没有关联性
高内聚:每个模块代码都是由关联性很强的代码组成，都是用来实现单一的功能，得遵守单一职责的原理
如何将单独的功能在需要执行的地方执行 ->订阅发布模式
订阅和发布

发布

执行计划

取订阅

取消计划

同步 异步和事件

同步和异步 事件

同步

异步

区别

问题