CODEWITHSUNDEEP
javascript
Angel Luis
Angel Luis

Reputation: 557

What happens if I attach the same events to the same elements?

It will perform the search two times? Or it will overwrites the first listener?

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

or

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

Upvotes: 0

Views: 79

Answers (3)

dporechny
dporechny

Reputation: 646

EventListeners will be called in exact order they are attached to the element.

const clicker = document.getElementById('clicker')

clicker.addEventListener('click', () => { alert('Fired first time') })
clicker.addEventListener('click', () => { alert('Fired second time') })
<button id="clicker">Click me</button>

Upvotes: -1

nicholaswmin
nicholaswmin

Reputation: 22949

element.onclick = () => {} overwrites the handler.

If you don't want to overwrite it, use element.addEventListener instead.

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>

Upvotes: 4

RK_15
RK_15

Reputation: 939

Assigning property overwrites the listener:

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

But setting listener like this add the listener in the queue (duplicates also) and they all executes.

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

Upvotes: 0

Related Questions