Event-Driven Architecture (EDA)
Event-driven architecture (EDA) responds to actions like button clicks. In this paradigm, events, such as “buttonClick,” trigger predefined actions. The user interacts with the interface, and the system, following the Event-Driven Programming model, responds dynamically to ensure a responsive and engaging user experience.
Example: To demonstrate basic event handling through a JavaScript EventDispatcher, prompting an alert using Event-Driven Architecture.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Event-Driven Architecture Example</ title > < style > body { margin: 0 auto; } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { color: green; } #myButton { width: 102px; height: 40px; background: #6583b9; border: none; color: white; border-radius: 5px; font-size: 16px; } #myButton:hover { scale: 1.03; background: skyblue; } </ style > </ head > < body > < div class = "container" > < h1 >w3wiki</ h1 > < button id = "myButton" >Click me!</ button > </ div > < script > class Event { constructor(name) { this.name = name; } } class EventDispatcher { constructor() { this.listeners = {}; } addListener(eventName, callback) { if (!this.listeners[eventName]) { this.listeners[eventName] = []; } this.listeners[eventName].push(callback); } dispatchEvent(event) { const eventName = event.name; if (this.listeners[eventName]) { this.listeners[eventName] .forEach(callback => callback(event)); } } } const eventDispatcher = new EventDispatcher(); eventDispatcher.addListener("buttonClick", (event) => { console.log(`Button Clicked! (${event.name})`); alert("Button Clicked!"); }); document.getElementById("myButton") .addEventListener("click", () => { const buttonClickEvent = new Event("buttonClick"); eventDispatcher.dispatchEvent(buttonClickEvent); }); </ script > </ body > </ html > |
Output:
What is the Event Driven Programming Paradigm ?
Event-driven programming is a paradigm where the execution of a program is determined by events such as user actions or messages. Programs respond to events with predefined actions, allowing for asynchronous and responsive behavior, often seen in GUI applications and distributed systems.