同步异步和事件

最新推荐文章于 2022-11-19 15:54:06 发布

a404007652

最新推荐文章于 2022-11-19 15:54:06 发布

阅读量767

点赞数

原文链接：http://www.cnblogs.com/Lia-633/p/9939625.html

版权

同步和异步事件

浏览器提供了同步和异步机制 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