MACIEK: Hi my name is Maciek and I'm an engineer on Google Web Designer.
Today I'll show you how to use Google Web
Designer event system.
By the end of this video
you'll know how to setup event handlers in your documents.
I've prepared a simple document for us to use
which contains a carousel gallery and a blue div.
In order to add event handlers to your document
you're going to want to find the events panel here on the right side.
This will show you a list of all of
your installed event handlers.
We don't have any handlers yet here
so the list is empty.
But if you have a lot of them,
you can sort and filter through them.
To add event handlers to this list
we're going to need to bring up the events dialog.
There are a couple ways to get to that dialog.
One way if you already know which target you want to select,
you can right click on an element and select
Add event...
This will set the selected element as your target.
Instead let's deselect that element and open the
events dialog using this little plus icon in the corner.
This will open up the events dialog without any preferences selected.
The first thing we want to do
is select the target.
This is the element that'll trigger our event handler.
For this example I'm going to choose the carousel.
Next we need to choose an event
which will trigger our event handler.
Most elements support Mouse and Touch events.
Since this is a carousel it also supports some special specific events.
I'm going to select the click event
and now we get to choose an action.
This is the action that we want to perform in response to the event.
Most elements support setting CSS styles
and adding custom actions which we'll get to in a minute.
If you have other custom elements in
your documents, they might have additional events here for you to select.
For this demo I'm going to choose set styles.
Next we're going to choose a receiver.
This is the element whose CSS we want to change.
For this demo I'm going to choose the blue div,
and I'll assign some CSS properties to it.
I'll change the background color of the div to be red.
You can choose some easing options,
add a duration, and click
OK to save.
That's it. We've added an event handler to our document.
Now we can go ahead and preview the document and see what we've made.
Now we see when I click on the carousel, the blue div
slowly changes to red.
That was pretty easy.
Now let's say we've made a mistake
and we want to change our event handler.
We don't need to make a whole brand new event handler.
We can just edit the one that we've currently made.
If you double click on the event handler,
it'll open up the events dialog in editing mode.
Let's go back to the actions screen and select custom action.
Here you can write any valid JavaScript code.
I'm going to go ahead and give the code a function name.
And for the purpose of this demo let's just make an alert call.
That looks good.
Now click OK to save.
We see that our event handler has been updated
to show that we're going to call my function.
Let's preview it.
Now when I click on the carousel
we see the alert statement come up.
I love Google Web Designer!
That's it for today.
If you have any questions
about events or any other Google Web Designer topics,
just post them in the comments section.
Thank you.