Kevin Powell - Community•2mo ago

Can we add an event listener in a conditional statement ?

Hello guys, sorry to disturb you all, can we have an event listener inside an if statement ? Does that make sense to have one in a conditional ?

26 Replies

Jochem•2mo ago

you can add an event listener in an if statement, yeah just keep in mind it won't be updated later if the condition in the if changes after it's added

Mannix•2mo ago

wouldn't it be better to have a conditional inside a event listener ?

Jochem•2mo ago

depends on the situation, but yeah, that would respond to changes in state

FakerOP•2mo ago

hmm like say we have the following: if (condition 1) { element.addEventListener('action', callback) } if condition 1 is changed to another condition like condition 2, what happen?

Jochem•2mo ago

nothing, unless that code is run again and the event triggering will only run the code in callback, not the surrounding code if you want an event listener to act differently (which includes not acting at all) depending on state, you should do what Mannix suggested you can use a guard clause:

function callback() {
  if (condition2) return;
  //do condition 1 stuff
}

function callback() {
  if (condition2) return;
  //do condition 1 stuff
}

FakerOP•2mo ago

yeah I see, hmm normally when we have an event listener outside any conditions, the event handler within it will handle any event at any time? While if we have an event listener inside a condition, the event listener will execute only if the condition matches?

Jochem•2mo ago

no, the event listener will get added only if the condition matches addeventlistener fires once and then has nothing further to do with the execution of the listener itself you're telling the javascript engine "hey, when this event happens, run this bit of code". If you wrap the addeventlistener in a conditional, you look at the conditional once and then, if it's true, tell the engine to run the code when an event happens. If it's false, then you don't, and if the condition changes, that code won't magically run again

FakerOP•2mo ago

yeah I see, last question, how can the condition change? Is there any specific scenario ? Because normally we won't be able to change the condition I think

Jochem•2mo ago

I don't really understand the question, cause that wholly depends on the condition

FakerOP•2mo ago

I mean say we have:

if (condition1) {...}

if (condition1) {...}

Can condition1 changed to condition2 here ?

Jochem•2mo ago

no, but the check for condition1 could change from true to false

FakerOP•2mo ago

ahhh I see

Jochem•2mo ago

you could have a condition of "number of items in this list" and a button that adds or removes an item. Let's say you have a todo list and there's 0 items in the list to start, so you don't bother adding the event listener for a (non-existent) clear button. Then someone adds a todo item. If condition1 is "are there items in the list?" then when that code originally runs in the main level of a javascript file, the answer will be no. Then the todo item gets added, and the condition would evaluate to true, but it won't automatically run again just because the condition changed

FakerOP•2mo ago

yeah I see, just to sum up, can you confirm whether the following statements are correct please, to see if I've understood: 1. Event listeners can be within conditional statements. However, if the condition response changes (such as from True to False), the event handler isn't going to fire up due to the change in state. If we want to handle any change in states, then may be it is better to put the conditional statement within the callback function itself. 2. An event listener only execute once (it makes sense because we can't register the same event more than once); it is the event handler that is fired every time that it is needed (confirm this one please)

Jochem•2mo ago

not quite 1. The event handler is going to fire if the conditional was true, but not if it was false. It's literally just adding the listener or not, depending on the condition at the time the code runs. It's no different than if (condition1) { alert('hello world'); } just with the adding of the event listener instead of showing a popup 2. An event listener fires every time an event occurs, unless you add the once option to the addEventListener call. addEventListener fires only once, just like any other function call, when it is encountered by the javascript engine. The callback can be fired any number of times

FakerOP•2mo ago

I think I'm confuse between an

event listener

event listener

and the

addEventListenener

addEventListenener

function; these 2 are different things?

Jochem•2mo ago

the event listener is the callback you add with addEventListener

FakerOP•2mo ago

ahhh I see, is their a difference between an event listener or event handler or these 2 terms can be used interchangeably ?

Jochem•2mo ago

They're interchangeable. I suppose I should call it something like event handler

FakerOP•2mo ago

Yep I see, I think I have a clearer view now, thanks, really appreciate, thanks for your time and the explanation 💯

Jochem•2mo ago

no problem, and sorry for the confusion!

glutonium•2mo ago

keep in mind u can also removeEventListener(<passTheSameCallbackFunction>)

FakerOP•2mo ago

Yep, I haven't use the remonveEventListener yet, is there any popular use cases ?

glutonium•2mo ago

well, if u have way too many event listeners , then it is good to get rid of event listeners u dont need other than that idk any other reason to remove one, there could be context specific reasons as well in react u DO need to use removeEventListener tho to avoid side effects it looks something like this

useEffect(() => {
  function cb() {
    // call back code
  }

  window.addEventListener("resize", cb);
  
  return () => window.removeEventListener("resize", cb);
}, [])

useEffect(() => {
  function cb() {
    // call back code
  }

  window.addEventListener("resize", cb);
  
  return () => window.removeEventListener("resize", cb);
}, [])

FakerOP•2mo ago

Yeah I see, I will need to have a look at that later on, thanks for the knowledge shared !!

glutonium•2mo ago

welcm

Gaming

Programming

Can we add an event listener in a conditional statement ?

Did you find this page helpful?