LemonadeJS events

This chapter will describe more about the two native events and the JavaScript event object (e). That can be defined inside your component to treat further and advance behavior.

Event	Description
onload(component: DOMElement)	It happens when the component is mounted and ready in the DOM. `self.onload(component: DOMElement) => void`
onchange(property, affectedElements)	It happens when the value of a self property in observation is updated. `self.onchange(property: string, affected: object) => void` `@param property` - self property that triggered the event. `@param affectedElements` - When the same property is bound to different HTML elements.

Examples

When a property value changes

There is a call to the method self.onchange when the value of a self property in observation changes. A self property is automatically added to the list of observable properties when this self property is included in the DOM.

<html>
<script src="https://lemonadejs.net/v4/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    // Create the self object
    const self = this;
    self.onchange = function(property) {
        // It will be called when counter is updated
        alert('The self property: ' + property + ' is updated');
    }
    // Create the property
    self.counter = 1;
    // Template
    return `<>
        <p>{{self.counter}}</p>
        <input type="button" value="Counter+1" onclick="self.counter++;"/>
    </>`;
}
// Render the LemonadeJS element into the DOM
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';

export default function Component() {
    // Create the self object
    const self = this;
    self.onchange = function(property) {
        // It will be called when counter is updated
        alert('The self property: ' + property + ' is updated');
    }
    // Create the property
    self.counter = 1;
    // Template
    return `<>
        <p>{{self.counter}}</p>
        <input type="button" value="Counter+1" onclick="self.counter++;"/>
    </>`;
}

See this example on codesandbox

When the component is ready

The component method self.onload will be called when the component is ready and appended to the DOM.

<html>
<script src="https://lemonadejs.net/v4/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    // Create the self object
    const self = this;
    self.onload = function(element) {
        // It will be called when the component is ready
        self.container.style.color = 'red';
    }
    // Template
    return `<div :ref="self.container">My component</div>`;
}
// Render the LemonadeJS element into the DOM
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';

export default function Component() {
    // Create the self object
    const self = this;
    self.onload = function(element) {
        // It will be called when the component is ready
        self.container.style.color = 'red';
    }
    // Template
    return `<div :ref="self.container">My component</div>`;
}

The event object

From version 2.2.4 you can pass the event object (e) from the template to any event handler, as example below.

<html>
<script src="https://lemonadejs.net/v4/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    // Create the self object
    const self = this;
    self.test = function(e) {
        console.log(e);
        e.preventDefault();
    }
    // The event object will be included
    return `<input type="button" value="Click here" onclick="self.test(e);"/>`;
}
// Render the LemonadeJS element into the DOM
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';

export default function Component() {
    // Create the self object
    const self = this;
    self.test = function(e) {
        console.log(e);
        e.preventDefault();
    }
    // The event object will be included
    return `<input type="button" value="Click here" onclick="self.test(e);"/>`;
}

The console shows the event object.

Edit this page on GitHub