Attach event listener through javascript to radio button

Question

I have several radio buttons with the same name. Like this:

Answer 1

Another option is to attach multiple elements to a single event listener by using delegated handlers

You can attach the parent listener to document or any appropriate parent node. Then you can check the event was raised by the appropriate target using the Element.matches() API or anything on event.target

document.getElementById("languages").addEventListener('click', function (event) {
    if (event.target && event.target.matches("input[type='radio']")) {
        // do something here ...
    }
});

This is roughly equivalent to the following jQuery syntax which uses .on() to provide delegation

$("#languages").on("click", "input[type='radio']", function(event) {
    // do something here ...
});

If you want to extend the EventTarget.addEventListener() prototype, you can wrap with your own method:

window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
    this.addEventListener(type, function (event) {
        if (event.target && event.target.matches(delegateSelector)) {
            listener.call(event.target, event)
        }
    });
}

Then use like this:

document.addDelegatedListener("click", "input[type='radio']", function(event) {
    // do something here ...
});

Demo in Stack Snippets

// example 1 - regular add event listener
document.getElementById("languages").addEventListener('click', function (event) {
    if ( event.target && event.target.matches("input[type='radio']") ) {
        console.log(event.target.value)
    }
});

// example 2 - reusable delegated listener
window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
    this.addEventListener(type, function (event) {
        if (event.target && event.target.matches(delegateSelector)) {
            listener.call(event.target, event)
        }
    });
}

let parent = document.getElementById("weekdays")
parent.addDelegatedListener("click", "input[type='radio']", function(event) {
    console.log(this.value)
});

h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1em;
}
code {
    background: #e9e9e9;
    padding: 1px 4px;
    border-radius: 3px;
}
label input {
    vertical-align: text-top;
}

Languages addEventListener + Element.matches

   HTML 
   JS 
   CSS 


Weekdays EventTarget.prototype.addDelegatedListener

   Mon 
   Tue 
   Wed