文章目录
  1. 1. Defined
  2. 2. Main()
  3. 3. Update 03-15-2018
    1. 3.1. options
  4. 4. Reference

Defined

遇到一个问题, 关于循环对象导致事件多次被调用.之前没有真正实际碰到过相关问题, 于是记录一下.

Main()

直接给例子和结论好了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function() {
let btn1 = document.querySelector('#show1');
let btn2 = document.querySelector('#show2');
btn1.onclick = function() {
console.log(111);
}
setTimeout(function() {
btn1.onclick = function() {
console.log(222);
}
}, 2000);
// 0-2s 111 2s+ 222

btn2.addEventListener('click', function() {
console.log(333);
});
setTimeout(function() {
btn2.addEventListener('click', function() {
console.log(444);
});
}, 2000);
// 0-2s 333 2s+ 333/444
}

addEventListener不会覆盖原来的handler, 如果需要覆盖, 就需要添加removeEventListener, 而且不能用匿名监听器, 不过jQuery利用off函数实现了, 暂时不知道如何实现的… (stick into tag NeedUpdate

Update 03-15-2018

target.addEventListener(type, listener[, options]);

options

  • once: boolean

  • capture: boolean
    triggered in capture model(on)

  • passive: boolean
    never use preventDefault function(on)

Reference

Event order
addEventListener
removeEventListener

文章目录
  1. 1. Defined
  2. 2. Main()
  3. 3. Update 03-15-2018
    1. 3.1. options
  4. 4. Reference