---
title: "LemonadeJS Core Events | v4 docs"
description: "LemonadeJS v4 archive. Utilize LemonadeJS events to design custom component responses and interactions."
source: https://lemonadejs.com/docs/v4/events/
---
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
```
```javascript
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 `<>
{{self.counter}}
`;
}
```
[See this example on codesandbox](https://codesandbox.io/s/javascript-events-re4bwy)
### When the component is ready
The component method `self.onload` will be called when the component is ready and appended to the DOM.
```html
```
```javascript
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 `
My component
`;
}
```
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
```
```javascript
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 ``;
}
```
The console shows the event object.