Dominator.js | on Property (Event Listeners) (Nesting)

Using the 'on' Property with Dominator Nesting

The 'on' property in Dominator.js is used to add event listeners to elements. When it's a single event listener, the value is an object. When handling multiple event listeners, the value becomes an array of objects, each representing an individual event.

Example Usage:

1. Single event listener (click event)

                    D$({element: 'button', text: 'Click Me', on: {type: 'click', callback: ({e, data, mysqlDb, helper}) => {
                        console.log('Button clicked');
                    }}, appendTo: '.example-output'});
                

This code creates a <button> element with the text "Click Me" and attaches a click event listener. When clicked, the message "Button clicked" is logged to the console.

2. Multiple event listeners (click and mouseover events)

                    D$({element: 'button', text: 'Click or Hover Me', on: [
                        {type: 'click', callback: ({e, data, mysqlDb, helper}) => { 
                            console.log('Button is clicked'); 
                        }},
                        {type: 'mouseover', callback: ({e, data, mysqlDb, helper}) => { 
                            console.log('Mouse is over the button'); 
                        }}
                    ], appendTo: '.example-output'});
                

This code creates a <button> element with the text "Click or Hover Me" and attaches two event listeners: one for the click event and another for the mouseover event. Each event triggers its respective callback and logs a message to the console.

3. Event listener with custom data

                    D$({element: 'div', text: 'Click Me for Data', on: {type: 'click', data: {message: 'Data stored in event'}, callback: ({e, data, mysqlDb, helper}) => {
                        console.log(data.message);  // Logs: 'Data stored in event'
                    }}, appendTo: '.example-output'});
                

This code creates a <div> element with the text "Click Me for Data" and attaches a click event. When clicked, it logs the custom data stored in the event listener object.

The 'on' property in Dominator.js works as follows:

• If there's a single event listener, the value is an object containing the type, callback, and optionally data.
• If there are multiple event listeners, the value becomes an array of event listener objects.

4. Multiple event listeners with custom naming

D$({
    element: 'button',
    text: 'Example',
    on: {
        onClick: (e) => {
            const { helper, mysqlDB } = e;
            console.log('Welcome to Dominator');
        },
        onMouseOut: (e) => {
            console.log('Coolest');
        }
    },
    appendTo: 'section.example-output'
});

This code creates a <button> element with the text "Example" and attaches multiple event listeners using a **custom naming format**. Instead of defining the events with `type`, the event names `onClick` and `onMouseOut` directly act as event handlers.

• onClick: Triggers when the button is clicked and logs "Welcome to Dominator" in the console.
• onMouseOut: Triggers when the mouse moves away from the button and logs "Coolest".

This approach allows defining event listeners in a **more readable** and **intuitive format**, avoiding the traditional `type` and `callback` structure.

Developers can also access useful utilities from helper and database interaction methods from mysqlDB by simply **destructuring the event parameter** (e) in the callback function.