troubleshooting Question

Event Listeners Not Detaching - Creating Multiple Events For Same Element

Avatar of MJ
MJFlag for United States of America asked on
Web DevelopmentJavaScript
2 Comments1 Solution84 ViewsLast Modified:
I'm still having issues with the below code. When I test the page, the top code will run as expected. Once I invoke the bottom code which is attached to a text input field, the event listeners still seem to not be removed as each time I test the field, it will proportionately run the code that many times. So for the bottom code I should get only 2 console logs each time (which happens the first time) but if I change the text in the input field a second time, the function runs twice and I get 4 console logs. If I test again then the code runs 3 times and I get 6 console logs. If I then go back to the top piece of code and test that one again it will then run 4 times and I'll get 8 console logs?  I'm totally confused as to how to fix this? The code is invoked each time someone focuses on one of the elements in the code. I have to inject this code via a Tag Manager (DTM) using an event based rule.
var employmentStatusSelect = document.getElementById('mainForm:cont_appRequest_customers__0_employmentStatus:decoin:appRequest_customers__0_employmentStatus');

employmentStatusSelect.removeEventListener('change', trackEmploymentStatusSelect);
employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);

function trackEmploymentStatusSelect (){
    var esSelVal = event.target.value;
    console.log(" event.target.value ==> " + event.target.value);
    if(esSelVal != ""){
        console.log("employmentStatusSelect ==> " + event.target.value);  
    } else {
       console.log("employmentStatusSelect will not report");
    }
};

var startCurrentJobInput = document.getElementById('mainForm:cont_appRequest_customers__0_records_ichabod_fields__0_columns_start_job:decoin:appRequest_customers__0_records_ichabod_fields__0_columns_start_job');

startCurrentJobInput.removeEventListener('blur', trackStartCurrentJobInput)
startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

function trackStartCurrentJobInput(){
    var scjVal = event.target.value;
    console.log(" event.target.value ==> " + event.target.value);
    if(scjVal != ""){
        console.log("startCurrentJobInput ==> " + event.target.value);  
    } else {
       console.log("startCurrentJobInput will not report");
    }
};
Thanks!
ASKER CERTIFIED SOLUTION
MJ

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros