Event Handling

CTag provides a flexible event-handling mechanism to manage interactions and respond to user actions. You can add event listeners to CTag elements for a wide range of events, such as click, keypress, change, and more.

• on
• once
• clicked
• keyPressed
• changed
• submited

on

The on() method allows you to add a general event listener for a specified event. When the specified event occurs, the provided handler function is called with the CTag instance and the event object as arguments.

Usage:

const myTag = tag('button');
myTag.on('click', (tag, evt) => {
  // Event handling logic here
});

once

The once() method is similar to on(), but the event listener is automatically removed after being executed once. It is useful for handling events that should occur only once.

Usage:

const myTag = tag('button');
myTag.once('mousedown', (tag, evt) => {
  // Event handling logic here
  // This listener will only execute once
});

clicked

The clicked() method is a shorthand for adding a click event listener. It simplifies handling click events, making the code cleaner and more readable.

Usage:

const myTag = tag('button');
myTag.clicked((tag, evt) => {
  // Event handling logic for a click event
});

keyPressed

The keyPressed() method allows you to add an event listener for keypress events. You can optionally specify a key parameter to listen for events with a specific key. If key is provided, the handler will only be called when the specified key is pressed.

Usage:

const myTag = tag('input');
myTag.keyPressed((tag, evt) => {
  // Event handling logic for keypress events
}, 'Enter'); // Only triggers for the Enter key

changed

The changed() method is used to add an event listener for change events. This is particularly useful for input elements like textboxes and selects, as it allows you to respond to changes in the element's value.

Usage:

const myTag = tag('input');
myTag.changed((tag, evt) => {
  // Event handling logic for change events
});

submited

The submited() method simplifies handling submit events on form elements. It allows you to add an event listener for form submission. The handler is called when the form is submitted.

Usage:

const myForm = tag('form');
myForm.submited((tag, evt) => {
  // Event handling logic for form submission
});

Examples

Here are some examples of how to use event handling with CTag:

// Example 1: Adding a click event listener
const button = tag('button');
button.clicked((tag, evt) => {
  console.log('Button clicked!');
});

// Example 2: Adding a keypress event listener for the Enter key
const input = tag('input');
input.keyPressed((tag, evt) => {
  if (evt.key === 'Enter') {
    console.log('Enter key pressed!');
  }
});

// Example 3: Adding a change event listener for a select element
const select = tag('select');
select.changed((tag, evt) => {
  console.log('Selection changed:', tag.value);
});

// Example 4: Adding a submit event listener for a form
const form = tag('form');
form.submited((tag, evt) => {
  evt.preventDefault(); // Prevent form submission
  console.log('Form submitted!');
});

These examples demonstrate how to add event listeners for various events using CTag methods.