1.事件绑定的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <button onclick="fun()">嵌入dom</button>
    <button id="btn">直接绑定</button>
    <button id="btn1">事件监听</button>
</body>
<script>
    function fun() {
        console.log('嵌入dom')
    }
    document.getElementById('btn').onclick = function () {
        console.log('直接绑定')
    }
    document.getElementById('btn1').addEventListener('click',function(){
        console.log('事件监听')
    })
</script>

2.事件委托

事件委托利用了事件冒泡，将子元素自己的事件交给父亲来处理

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>

事件委托
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

3.事件循环

事件循环是一个单线程循环，用于将任务队列中的回调函数(任务)调度入栈。如果调用栈中的任务执行完毕并且任务队列中有对应的回调函数(任务)，则将回调函数出队并推送到调用栈中执行。

1
2
3
4
宏任务：script    setTimeout   setInterval  setImmediate, I/O, UI rendering。
微任务：process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)

事件循环的任务队列有宏任务队列和微任务队列，每次一个宏任务执行完毕的时候，都会把微任务队列中的微任务执行完毕之后才会再次执行下一个宏任务。

4.target和currentTarget区别

event.target：返回触发事件的元素
event.currentTarget：返回绑定事件的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <ul id="box">
        <Li id="apple">苹果</Li>
        <li>香蕉</li>
        <li>桃子</li>
    </ul>
</body>
<script type="text/javascript">
    var box = document.getElementById('box');
    var apple = document.getElementById('apple');
    //直接绑定在目标元素apple上
    apple.onclick = function (e) {
        console.log(e.target);          //<li id="apple">苹果</li>
        console.log(e.currentTarget);    //<li id="apple">苹果</li>
        console.log(this);               //<li id="apple">苹果</li>
        console.log(e.target === e.currentTarget);      //true
        console.log(e.target === this);           //true
    }
    //绑定在父元素box上（如果点击apple这个li时）
    box.onclick = function (e) {
        console.log(e.target);           // <li id="apple">苹果</li>
        console.log(e.currentTarget);       //<ul id="box">...</ul>
        console.log(this);                  //<ul id="box">...</ul>
        console.log(e.currentTarget === this);      //true
        console.log(e.target === e.currentTarget);        //false
        console.log(e.target === this);           //false
    }

</script>

5.事件冒泡和事件捕获

执行顺序不同
事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。
事件捕获：事件从最外层开始发生，直到最具体的元素。