Velo: Reacting to User Actions Using Events

An event is something that can happen to an element, usually as the result of a user action. For example, onClick is the event that occurs when a user clicks an element, while onMouseIn is the event that occurs when a user hovers over an element with their mouse pointer.

Events can happen to any element in your page, including the page itself, the header and footer, and any datasets you may have on your page.

If you want your site to do something, or react, when an event occurs to an element, you add an event handler to it. An event handler is a function that holds the code you want to run when the event occurs. Adding an event handler to an element wires the function to the element.

Your site watches elements to see if events happen to them. If an event happens that has an event handler, the code in the event handler function will run. More on that below.

1. Select the element.

2. In the Properties & Events panel, click on the event handler you want to add.

3. You can edit the default name if you want, and then press Enter.

   

When you add an event handler to an element, a function for that event handler is added to your page's code. 

Behind the scenes, Velo connects, or wires, the function to your element so that the code you write in the function runs when the event happens. As you can see from the example above, you need to add the code you want to run between the curly braces, { }. For information on coding in Velo, see Working in the Velo Code Panel.

To delete an event handler, select the element and click in the Properties & Events panel for that event. 

Deleting an event handler from your element removes, or breaks, the wiring between the element and its event handler function. The code itself is not removed from your page, but your code for the event will no longer run if the event occurs to your element.

The wiring between your element and its event handler is dependent on the name of the event handler function and the name you give the event handler in the Properties & Events panel. As long as the name of a function in your code matches the name of the function you give an event handler in the Properties & Events panel, your element will respond to the event using the code in that function.

For example, let's assume you have a button named takeTourButton on your site and that you added an onMouseIn event handler to it named takeTourButton_onMouseIn. You then add code to your function so that the button label changes from the default "Take the Tour" to "Let's Go!" when the user hovers on it. Your code would look something like this:

Copy Code
export function takeTourButton_onMouseIn(event) {
    $w("#takeTourButton").label = "Let's Go!";
}

If you delete the event handler from takeTourButton, your code remains on your site but the "Take the Tour" button no longer reacts to an onMouseIn event.

Now let's say you change your mind and decide you really do want the onMouseIn event handler for takeTourButton. You also want to use the code you originally wrote for that event. All you need to do is use the Properties & Events panel to re-wire the element to the event handler function you already have in your code.

To do this, go back to the Properties & Events panel and add an onMouseIn event handler to takeTourButton again. Velo sees that you have a function in your code named takeTourButton_onMouseIn, so it automatically names your new event takeTourButton_onMouseIn_1.

This is because the code can't have two functions with the same name, so it assumes it needs to add a new function to your code. Because you want to re-use the function you originally wrote for the onMouseIn event, rename the function in the Properties & Events panel to match the function you already have by removing the _1 from the name. When you press Enter, Velo won't add a new function to your code because the name you used for the function already exists. All you did was wire the new onMouseIn event handler to your existing function.

If you want to create a new onMouseIn event handler with new code, just use a new name for the event handler. Velo will add a new function to your code as usual.