Event Handlers vs onReady

Ask the community
,
1

Probably not the right title for this post, but I have 20+ events on my page to hide/show different elements. Right now I’m using the event handlers from the Properties panel, with individual “export functions” for each one. I know I can also do the same thing inserted in the onReady for the page.
I’m wondering if there’s a significant difference / advantage between each form of doing the same thing? Is there one that is “more right” or quicker?

I love learning and I’ve gotten a lot better at coding thanks to this forum, and I’m trying to get all the info I can!

export function menuButton1_onMouseIn(event) {
    $w('#menuBox1').show();
}
export function menuButton1_onMouseOut(event) {
    $w('#menuBox1').hide();
}
export function menuBox1_onMouseIn(event) {
    $w('#menuBox1').show();
}
export function menuBox1_onMouseOut(event) {
    $w('#menuBox1').hide();
}
// etc

versus

$w.onReady(() => {
    $w("#menuButton1, #menuBox1").onMouseIn((event) => {
        $w("#menuBox1").show();
    });
    $w("#menuButton1, #menuBox1").onMouseOut((event) => {
        $w("#menuBox1").hide();
    });
 // etc
})
2

The main advantage of setting the event handlers in the page’s onReady() function is that if you need to copy/paste, you don’t need to connect the elements with the event handlers. Setting event handlers from the Property panel is often more convenient.

I use both depending on my mood and the weather.

3

Hello together,

i am of the opinion that there is one more advantage of using event handlers inside the onReady. It is more simple to understand when working with datasets, which also needs their own onReady. In the case when you have several onReady-querries, it can get very difficult to manage your code, when you are NOT working with event-handlers inside the onRady-function.

4

@russian-dima Several onReady queries?

5

@yisrael-wix
What i mean is, :sweat_smile:

when NOT using this structure…

$w.onReady(() => {
    $w("#menuButton1, #menuBox1").onMouseIn((event) => {
        $w("#menuBox1").show();
    });
    $w("#menuButton1, #menuBox1").onMouseOut((event) => {
        $w("#menuBox1").hide();
    });
 // etc
})

and you are working with several datasets, you have to put in every of your codelines the onReady of the current dataset. So you will have several (onReady-commands) in your code, right?

When using the mentioned code-structure, you put one time the onRady-command of a used dataset, and then you can work with it (just one line of code.)

That is what i wanted to say. :sweat_smile: