Callback Functions in event-driven programming paradigm
In the event-driven programming paradigm, we are using callback functions. This entails defining functions to handle specific events, such as button clicks. By registering these callbacks with event listeners, the program responds dynamically to user actions, embodying the essence of event-driven architecture for interactive and responsive applications.
Example: To demonstrate the core principles of event-driven programming for interactive user experiences using callback functions.
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 > // Callback function to handle button click event function handleButtonClick() { console.log("Button clicked!"); alert("Button clicked!"); } // Adding an event listener to the button document.getElementById("myButton") .addEventListener("click", handleButtonClick); </ 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.