0
How to deal with javascript event handling in oops concept
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
2 Réponses
0
- 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);