Scribd
Upload
4 views10 pages

Cos214 (Computer Programming II, Event-Driven Programming)

Event-driven programming is a paradigm where execution flow is determined by events such as user actions and system signals. Key characteristics include asynchronous execution, reactive event handling, and non-blocking operations, making it suitable for applications like GUIs, game development, and IoT. Effective exception handling is crucial to maintain application stability, and frameworks like tkinter and React.js facilitate event-driven development.

Uploaded by

creemax02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views10 pages

Cos214 (Computer Programming II, Event-Driven Programming)

Event-driven programming is a paradigm where execution flow is determined by events such as user actions and system signals. Key characteristics include asynchronous execution, reactive event handling, and non-blocking operations, making it suitable for applications like GUIs, game development, and IoT. Effective exception handling is crucial to maintain application stability, and frameworks like tkinter and React.js facilitate event-driven development.

Uploaded by

creemax02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Event-Driven Programming

Introduction to Event-Driven Programming

Definition
Event-driven programming is a programming paradigm where the flow of execution is
determined by events such as:

• User actions (clicks, typing)


• Sensor outputs

• System-generated messages or signals

Key Characteristics

• Asynchronous:
Code execution is driven by events rather than a predefined sequence.

• Reactive:
Functions (also called event handlers) are executed only when an event occurs.

• Non-blocking:
The system remains responsive, handling other operations while waiting for events.

Common Applications
• Graphical User Interfaces (GUIs)
→ E.g., button clicks, menu selections, drag-and-drop.

• Game Development
→ E.g., keyboard inputs, collisions, in-game timers.

• Internet of Things (IoT) & Networking


→ E.g., sensor triggers, incoming data packets, HTTP requests.
Core Concepts: Event-Handling Methods

Definition

Event-handling methods are functions (also known as event handlers) that execute in response
to specific events triggered by the user or system.

Example: Event Handling in Python (using tkinter)

import tkinter as tk

def on_button_click(event): # Event handler


print("Button clicked!")

root = tk.Tk()

button = tk.Button(root, text="Click Me") # Bind the left mouse button click event to
the handler

button.bind("<Button-1>", on_button_click)

button.pack()

root.mainloop()

Key Points to Note


• Binding:
The process of associating an event (like a mouse click) with a specific handler function
using .bind() or similar mechanisms in other frameworks.

• Types of Events:

o User Input Events:

▪ <Button-1>: Left mouse click

▪ <KeyPress-A>: Pressing the 'A' key


o System Events:

▪ Window resize

▪ Timer ticks or scheduled updates

Core Concepts II: Event Propagation (Bubbling & Capturing)

Definition

Event propagation is the process by which an event moves through the UI element hierarchy
(DOM tree) after being triggered. It determines when and where event handlers are executed.

The Document Object Model (DOM) tree is a hierarchical representation of a webpage’s


structure, where each HTML element is a node.

Phases of Event Propagation

1. Capturing Phase

o The event travels from the top of the DOM (e.g., window) down to the target
element.

o Also called the capture or trickling phase.

2. Target Phase

o The event reaches the actual target element that was interacted with.

3. Bubbling Phase
o The event bubbles back up from the target to its ancestors.

o Most event listeners are attached during this phase by default.

Example (JavaScript-like Pseudocode)

//Event starts at window document <html> <body> <parent>

document.getElementById("parent").addEventListener(

"click",

() => console.log("Parent clicked!"),


true // Capturing phase
);
document.getElementById("child").addEventListener(

"click",

() => console.log("Child clicked!") // Bubbling phase (default)


);

Output if the child is clicked:

Parent clicked! // Capturing

Child clicked! // Bubbling

Why It Matters

• Control Flow
Decide where to handle an event — at the target or one of its ancestors.

• Event Management
Use event.stopPropagation() to prevent the event from continuing up or down the tree.

• Performance Optimization
Avoid unnecessary event handling at higher levels of the UI hierarchy.

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<title>Event Propagation Demo</title>

<style>

#grandparent, #parent, #child {

padding: 20px;

border: 2px solid #333;

margin: 10px;
}
#grandparent { background-color: #fce4ec; }
#parent { background-color: #f8bbd0; }

#child { background-color: #f48fb1; }

</style>

</head>
<body>

<div id="grandparent">

Grandparent

<div id="parent">

Parent

<div id="child">

Child

</div>
</div>

</div>

<script>

const log = (msg) => console.log(msg);

document.getElementById("grandparent").addEventListener("click", () => log("Grandparent


(Capturing)"), true);

document.getElementById("parent").addEventListener("click", () => log("Parent


(Capturing)"), true);

document.getElementById("child").addEventListener("click", () => log("Child (Target)"));

document.getElementById("parent").addEventListener("click", () => log("Parent


(Bubbling)"));
document.getElementById("grandparent").addEventListener("click", () => log("Grandparent
(Bubbling)"));

</script>

</body>

</html>

Core Concepts III: Exception Handling in Event-Driven Systems

The Challenge

In event-driven architectures, errors that occur inside event handlers can:

• Crash the application if not properly managed

• Cause inconsistent UI states

• Go unnoticed, especially in asynchronous flows

Best Practices for Handling Exceptions

1. Use Try-Catch Blocks in Event Handlers


Encapsulate potentially risky code to handle exceptions gracefully.
def on_button_click(event):

try:

risky_operation()

except Exception as e:
print(f"Error: {e}") # Graceful fallback

• Prevents the event loop from breaking.

• Ensures the UI stays responsive.

2. Set Up Global Error Handlers

Use centralized error capturing for logging and alerts.

• In Browsers:

window.onerror = function (msg, url, lineNo, columnNo, error) {


console.error("Global Error:", msg);

return true; // Prevent default handler

};

• In Python (tkinter):
Override the report_callback_exception method in the Tk class to catch unhandled
exceptions in the GUI.

GUI-Specific Concerns

Thread Safety
• GUIs usually run on a single main thread.

• Blocking operations (e.g., file downloads, database access) should be offloaded using:

o Async callbacks

o Threads / background workers


State Corruption

• Avoid modifying shared data across multiple event handlers unless properly
synchronized.
• Use flags, queues, or locks to manage state transitions predictably.
Applications in GUI Programming

A. Common GUI Events

Event Type Example Triggers Use Case

Mouse Events click, mouseover, drag Interactive buttons, hover effects

Keyboard Events keypress, keyup Shortcuts, form validation

Window Events resize, close Responsive layouts, cleanup handlers

These events allow the interface to respond dynamically to user actions, improving usability and
interactivity.

B. Frameworks Using Event-Driven Models


• Desktop:

o tkinter (Python)

o Qt (C++/Python – via PyQt or PySide)

o WinForms / WPF (.NET)

• Web:

o Vanilla JavaScript: addEventListener

o React.js: JSX event bindings like onClick, onChange, etc.

o Vue.js / Angular: Use directives like v-on, (click)


These frameworks abstract event handling logic, making it easier to develop responsive user
interfaces.

C. Example: Modern Web GUI with Async Event Handling

document.querySelector("#login-btn").addEventListener("click", async (e) => {

e.preventDefault(); // Stop default form submission

try {

await validateForm(); // Handle form validation asynchronously


} catch (error) {
showErrorPopup(error); // Show user-friendly error message

});

Highlights:
• addEventListener: Binds the event to the element.

• e.preventDefault(): Prevents default browser behavior.

• async/await: Supports asynchronous workflows inside event handlers.

• Graceful error handling keeps the UI stable and user-friendly.

4. Summary & Key Takeaways

Core Insights

1. Event-Driven Programming centers on triggers and responses — the flow of execution


is dictated by events like user actions or system signals.

2. Event Handlers are functions tied to specific events (e.g., onClick, onKeyPress) and are
executed when those events occur.

3. Event Propagation describes how events traverse the UI component tree through:
o Capturing Phase (top-down)

o Target Phase (at the event source)

o Bubbling Phase (bottom-up)

4. Robust Exception Handling is essential for stability in GUI applications. Errors in one
handler should not crash the entire system.

5. GUI Applications (both desktop and web) fundamentally rely on events for
responsiveness and interactivity.

Further Study & Exploration

• Observer Pattern
A foundational design pattern in which subscribers (observers) automatically receive
updates when an observable changes state. Common in GUI toolkits and MVC
frameworks.
• Reactive Programming
A declarative paradigm for working with asynchronous data streams. Popular libraries
include:

o RxJS (JavaScript)

o RxPY (Python)

o Reactor (Java)

It builds on the observer pattern and allows composition of events using operators like map,
filter, and merge.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy