---
title: "LemonadeJS Events | v5 docs"
description: "LemonadeJS v5 archive. Learn LemonadeJS events to create dynamic and responsive interactions in your components, enhancing user experiences and frontend."
source: https://lemonadejs.com/docs/v5/events/
---
# Events
This section explains how to handle native JavaScript events within component templates and the two core component events provided by LemonadeJS.
## JavaScript Events
### The Event Object
When declaring a JavaScript event to a DOM element, you will have the event object and component scope object, which can help with extra logic and event reuse.
### A Simple Onclick Event
A basic onclick event example to log the objects on the console.
```html
```
```javascript
import lemonade from 'lemonadejs';
export default function Component() {
const test = (e, s) => {
// Onclick Event Object
console.log(e);
// Will be same as `this`
console.log(s);
e.preventDefault();
}
return render => render``;
}
```
### A Event With Loop
When an event is used in a template within a loop, the s parameter represents the scope of each loop entry, enabling dynamic interactions with individual items of the array.
```html
```
```javascript
export default function Component() {
this.coin = 'Click in a coin';
this.options = [
{ title: 'Bitcoin' },
{ title: 'Ethereum' },
{ title: 'Litecoin' },
];
const test = (e, s) => {
// Update the component property
this.coin = s.title;
}
return render => render`
${this.coin}
{{this.title}}
`;
}
```
## Core Events
LemonadeJS provides two core events: `onload` and `onchange`. The `onload` event fires when a component is mounted to the DOM, while `onchange` is triggered when reactive properties are updated.
| Event | Description |
|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
| `onload` | Fires after component DOM mounting. Used for initialization. `self.onload(component: DOMElement) => void` |
| `onchange` | Fires when reactive properties update. Handles property changes. `self.onchange(property: string, affectedElements: object) => void` |
### Private Declaration
Events can be registered privately within the component as the example below.
```javascript
export default function Component(children, { onload }) {
onload((element) => {
console.log(element, 'is ready');
})
return render => render`
Hello
`;
}
```
### Component Property Events
Alternatively, events can be registered directly on the component's `this` context, allowing parent components to access them. In contrast, private events remain fully encapsulated within the component, ensuring they are not externally accessible.
```javascript
export default function Component() {
this.onload((element) => {
console.log(element, 'is ready');
})
return render => render`
Hello
`;
}
```
## What's Next?
To learn more about the core events, explore the dedicated sections below:
- [Onload Event](/docs/v5/onload/)
- [Onchange Event](/docs/v5/onchange/)