绑定事件、事件队列、事件循环

一、绑定事件

1.HTMl元素内绑定

2.js绑定事件

3.事件监听绑定

 1  <button onclick="alert('点我干哈');">点我一哈</button> <!--1.点击事件后添加事件-->
 2  <button id="btn1">我是js事件</button>
 3  <button id="btn2">我是监听事件</button>
 4  <script>
 5      // 2.使用js绑定事件
 6      let btn1=document.getElementById('btn1');
 7      btn1.onclick=function(){console.log('第一个事件')} //该事件无效，被后面的事件覆盖
 8      btn1.onclick=function(){console.log('第二个事件')}
 9      //3.事件监听语法：element.addEventListener(event, function, useCapture)
10      // 要添加的事件名；要执行的函数；指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
11      let btn2=document.getElementById('btn2');
12      btn2.addEventListener('mousemove',func1,);
13      btn2.addEventListener('mouseenter ',func2,);
14      btn2.addEventListener('mouseover',func3,);
15      function func1(){
16         console.log(Date);
17      }
18     function func2(){
19         console.log('为什么要点我');
20      }
21     function func3(){
22          console.log('再见');
23      }

removeEventListener('mouseenter ',func2,) //移除事件

24 </script>

二、定时器

1.setTimeout 延时器，延时执行，只执行一次

语法：setTimeout(callback,delay);

2.清除延时器：clearTimeout(定时器名称)

3.setInterval 计时器，间隔时间执行一次，若不手动清除会一直存在

语法：setInterval(callback,time)

4.清除计时器

语法：clearInterval(callback,time)

三、事件队列

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

事件队列就是把一些不按顺序执行的事件放到队列里面，然后按照自己制定的顺序去执行。

setTimeout(()=>{
let n=+10;
console.log(n);
},2000)
let n=89;
console.log(n); 
//89
//10

 四、事件循环机制

1.执行栈和执行上下文

全局执行上下文：任何不在函数内的代码在全局执行上下文中，它会执行两件事：创建windws全局对象并设置this的值等于这个全局对象。

函数执行上下文：当函数被调用时，都会创建一个新的上下文

执行栈：调用栈

 

2.事件循环

1）当主线任务在执行时，会形成栈和堆；

2）js从上到下解析，按顺序完成同步任务；

3）当调用外部API时（setTimeout、ajax），会将此类异步任务挂起，继续执行执行栈中的任务，等异步任务返回结果后，再按照执行顺序排列到事件队列中；

4）主线程先将执行栈中的同步任务清空，然后检查事件队列中是否有任务，如果有，就将第一个事件对应的回调推到执行栈中执行，若在执行过程中遇到异步任务，则继续将这个异步任务排列到事件队列中。

5）主线程每次将执行栈清空后，就去事件队列中检查是否有任务，如果有，就每次取出一个推到执行栈中执行，这个过程是循环往复的... ...，这个过程被称为“Event Loop 事件循环”。

  https://zhuanlan.zhihu.com/p/41543963

 

    console.log(1);
    setTimeout(() => {
        console.log(2);
        setTimeout(() => {
            console.log(3);
            setTimeout(() => {
                console.log(4);
            }, 0) ;
        }, 0) ;
    }, 0);

    setTimeout(() => {
        console.log(5);
        setTimeout(() => {
            console.log(6);
        }, 0);
    }, 0);

    console.log('ok');
//输出：1 ok  2 5 3 6 4