Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

139
Views
Function as a callback reloads without respecting the event listener while using arrow-function gives intended behaviour. Why is it so?

Goal

Console must log a message only on clicking the button.


Set-up

const button_l = document.querySelector('.btn-left');

method-1 (Using arrow function as a callback)

button_l.addEventListener('click', () => {
    console.log('I am in')
});

method-2 (Using function as a callback)

button_l.addEventListener('click', changeSlide());

function changeSlide() {
    console.log('Am I globally present?');
}

Problem Facing

  1. Using method-1 gives the desired results.
  2. Using method-2, the function is called on page load, but when I remove the parentheses (from changeSlide() to changeSlide), it functions as it should, why is it so?

I think it is something very fundamentally obvious that I do not know.

I appreciate a link/reference to any helpful theory/understanding.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!