When we talk about widget events, we refer to a unique set of WEMscript that can follow a button click, execute a flowchart, navigate to a navigation item, or refresh the screen. It is also possible to change the view state, which we will discuss in later chapters.
To introduce events, let's create a small virtual dice that will output a random number between 1 and 6, along with a "Roll again" button that will trigger an event to refresh the screen and display a new random number. Copy and paste the following script, and let's dissect what is happening:
It is important to inform the WEM runtime that we want to run a specific event by registering it. The register event statement does exactly that, and it is mandatory for an event to function properly. Based on the previous chapters, the second line should now be clear regarding its purpose. The third line is interesting and requires some explanation.
Before I explain that, let's create the refresh screen event first:
Select the Events tab.
Click on "New event."
Name it "RefreshScreen."
And that's it! There is no need to write any event code for a refresh screen event. We will delve deeper into this in later chapters. Now, let's continue with the interesting part on line 3:
A veteran web developer will recognize the onclick attribute. What is interesting is the <?attr, which I briefly explained in previous chapters; it is a shorthand for HTML attribute encoding the output. This is important because, without it, we could potentially create invalid HTML. The @RefreshScreen is another interesting aspect; it is not a number variable, a boolean, or text, but rather an event. You may wonder how you can output an event. What gets output is JavaScript code that will trigger the @RefreshScreen event, and it will look something like this:
Don't worry; you never have to call the WEM Runtime API directly, as it is abstracted from the widget developer. This is just to illustrate what is happening under the hood. Note that it does not matter where you trigger an event; it could also be in an ondblclick attribute, an onblur event, or even manually called in JavaScript.