ypsilon-event-handler
Version:
A production-ready event handling system for web applications with memory leak prevention, and method chaining support
119 lines (101 loc) • 4.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Event Management Test ~ YpsilonEventHandler</title>
<meta name="description" content="YpsilonEventHandler - Dynamic Event Management Test Page">
<link rel="icon" type="image/x-icon" href="./../favicon.ico">
<style>
body { font-family: sans-serif; padding: 2rem; margin: 0 auto; max-width: 800px; }
button, input { margin: 0.5rem; padding: 0.5rem 1rem; }
.output { margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; }
.success { color: green; }
.error { color: red; }
</style>
</head>
<body>
<h1><a href="./index.html" title="Back to index" style="text-decoration: none;">«</a> Dynamic Event Management Test</h1>
<div>
<button id="add-keydown">Add Keydown Event</button>
<button id="remove-keydown">Remove Keydown Event</button>
<button id="check-keydown">Check Keydown Event</button>
<button id="add-duplicate">Try Add Duplicate</button>
</div>
<div>
<button id="add-debounced">Add Debounced Input</button>
<button id="remove-input">Remove Input Event</button>
<button id="check-input">Check Input Event</button>
</div>
<input type="text" name="y-demo-1" placeholder="Type here to test input events..." />
<div class="output" id="output">
<p>Press keys or type to test events...</p>
<p>Event status will appear here...</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/ypsilon-event-handler@1.5.0/ypsilon-event-handler.min.js"></script>
<script>
class TestHandler extends YpsilonEventHandler {
constructor() {
super({
'body': ['click']
});
}
handleClick(event, target) {
const action = target.id;
if (action && typeof this[action.replace('-', '_')] === 'function') {
this[action.replace('-', '_')](target, event);
}
}
handleKeydown(event, target) {
this.log(`🔥 Keydown detected: ${event.key}`, 'success');
}
handleInput(event, target) {
this.log(`📝 Input detected: "${target.value}"`, 'success');
}
add_keydown() {
const result = this.addEvent('body', 'keydown');
this.log(`Add keydown: ${result ? 'SUCCESS' : 'ALREADY EXISTS'}`, result ? 'success' : 'error');
}
remove_keydown() {
const result = this.removeEvent('body', 'keydown');
this.log(`Remove keydown: ${result ? 'SUCCESS' : 'NOT FOUND'}`, result ? 'success' : 'error');
}
check_keydown() {
const exists = this.hasEvent('body', 'keydown');
this.log(`Check keydown: ${exists ? 'EXISTS' : 'NOT FOUND'}`, exists ? 'success' : 'error');
}
add_duplicate() {
// Try to add the same event twice
const first = this.addEvent('body', 'keydown');
const second = this.addEvent('body', 'keydown');
this.log(`First add: ${first}, Second add: ${second} (should be false)`, second ? 'error' : 'success');
}
add_debounced() {
const result = this.addEvent('body', { type: 'input', debounce: 600 });
this.log(`Add debounced input: ${result ? 'SUCCESS' : 'ALREADY EXISTS'}`, result ? 'success' : 'error');
}
remove_input() {
const result = this.removeEvent('body', 'input');
this.log(`Remove input: ${result ? 'SUCCESS' : 'NOT FOUND'}`, result ? 'success' : 'error');
}
check_input() {
const exists = this.hasEvent('body', 'input');
this.log(`Check input: ${exists ? 'EXISTS' : 'NOT FOUND'}`, exists ? 'success' : 'error');
}
log(message, type = '') {
const output = document.getElementById('output');
const p = document.createElement('p');
p.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
p.className = type;
output.appendChild(p);
output.scrollTop = output.scrollHeight;
}
}
// Initialize handler
const handler = new TestHandler();
handler.log('🚀 TestHandler initialized with dynamic event management!', 'success');
// Test initial state
handler.log(`Initial keydown exists: ${handler.hasEvent('body', 'keydown')}`, 'success');
handler.log(`Initial input exists: ${handler.hasEvent('body', 'input')}`, 'success');
</script>
</body>
</html>