2020-10-02 addEventListener和on的区别 Object.entries

1. addEventListener和on的区别

• ddEventListener可以设置元素触发顺序外,第三个参数为false时，也就是默认时，是事件冒泡。而当为true时，是捕获阶段
• addEventListener还能多次绑定事件，而 on 事件多次绑定的话会出现覆盖。

例如：

• 设置多个addEventListener：

只滑动一次，但是触发了两次，这是因为两个addEventListener都在监听，事实证明是不会被覆盖的

• 设置多个on：

只滑动一次，也只触发了一次，这是因为后面的on事件覆盖了前面的监听，事实证明on是会被覆盖的

• 设置一个on一个addEventListener:

let han = document.querySelector('.han')
    han.onclick = () => {
      console.log(1)
    }
    han.addEventListener('click', () => {
      console.log(2)
    })

结果：

说明是不会覆盖的

相同点
都是会事件冒泡的

2. Object.entries

Object.entries可以遍历一个对象的key和value而不用for…in来搭配遍历

for (let [key, value] of Object.entries(obj1)) {
      console.log(`${key} +++ ${value}`)//a +++ some   b +++ ha
    }
    Object.entries(obj1).forEach(([key, value]) => {
      console.log(key, value)//a some b han
    })