How to deal with javascript event handling in oops concept

Question

guys ! i was working with javascript objects . i cant found a solution to handle events in a systemic manner e.g to create multiple buttons then assign them events and handler function .

i have assigned eventlistner method to the the object class .. the question is how to call this method in dom. ..

i have searched in internet but not got the right answer ... i found it little bit confusing for me...

any body please help me about how to assign events and handlers in oo js.

i was dealing with

className.prototype.addEventListner=function(event,handler){

}
now i want to know how to call this method for perticular element made from this className

Answer 1

https://code.sololearn.com/WyRStEzaRBrA/?ref=app

Answer 2

- Define an OOP class with event handling methods.
- Instantiate objects from the class.
- Use object methods to add event listeners.
- Append objects to the DOM for interaction.

Example:
// Define an OOP class for buttons with event handling
class ButtonWithEventHandler {
constructor(text) {
this.text = text;
this.element = document.createElement('button');
this.element.textContent = text;
}

addClickListener(handler) {
this.element.addEventListener('click', handler);
}

addToDOM(targetElement) {
targetElement.appendChild(this.element);
}
}

// Instantiate objects
const button1 = new ButtonWithEventHandler('Button 1');
const button2 = new ButtonWithEventHandler('Button 2');

// Add event listeners
button1.addClickListener(() => alert('Button 1 clicked!'));
button2.addClickListener(() => alert('Button 2 clicked!'));

// Append to the DOM
const container = document.getElementById('button-container');
button1.addToDOM(container);
button2.addToDOM(container);