Question

它将执行两次搜索？否则它将覆盖第一个侦听器？

element.onclick = () => { search(); } element.onclick = () => { search(); }

或

element.addEventListener('click', () => { search(); }) element.addEventListener('click', () => { search(); })

Answer 1

element.onclick = () => {}覆盖处理程序。

如果您不想覆盖它，请改用element.addEventListener。

const element = document.querySelector('button')

element.addEventListener('click', e => {
  console.log('1st event handler')
})

element.addEventListener('click', e => {
  console.log('2nd event handler')
})

<button>Click me</button>

Answer 2

分配属性会覆盖侦听器：

element.onclick = () => { search(); }

但是像这样设置侦听器会将侦听器添加到队列中（也重复），它们都将执行。

element.addEventListener('click',() => { search(); });

Answer 3

EventListeners将按照连接到元素的确切顺序被调用。

SELECT ART.*, EAN.*, EAN.ARTNR "EAN_ARTNR"
 FROM SUCH.ART ART,(select distinct * from SUCH.EAN) EAN 
 WHERE ART.ARTNR = ean.unit_artnr
 and ean.typ = 'LE4' ;

const clicker = document.getElementById('clicker')

clicker.addEventListener('click', () => { alert('Fired first time') })
clicker.addEventListener('click', () => { alert('Fired second time') })

如果将相同的事件附加到相同的元素上会发生什么？

3 个答案: