📘 Tutorial 3: Event Handling
Learn how to handle user interactions and manage events in ωλβν¨νσ components using declarative patterns.
Requirements
- • Completed Tutorial 2: Building Components
- • Basic JavaScript event handling knowledge
- • Installed ωλβν¨νσ CLI
🖱 Basic Event Binding
Click Events
ωλβν¨νσ.component('Button', {
view: () => `
`
});
Form Events
ωλβν¨νσ.component('InputField', {
view: () => `
`
});
🧪 Live Event Example
Recent events will appear here
⚡ Advanced Concepts
Event Delegation
// Parent component handles all child events
ωλβν¨νσ.component('EventBus', {
view: () => `
${this.props.children}
`,
handleEvent: (e) => {
console.log(`Event from ${e.target.tagName}`);
}
});
🛠 Practice Exercise
Create a 'Counter' component that:
- Initializes a connection on mount
- Updates state when props change
- Disconnects resources on unmount