Events Overview - Google Web Designer

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's event system.

By the end of this video,

you'll know how to set up
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 dialogue.

There are a couple of ways
to get to that dialogue.

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 dialogue

using this little 'plus'
icon in the corner.

This will open up the events dialogue
without any preferences selected.

The first thing we want to do
is select the target.

This is the element that will
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 colour
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 will open up the events dialogue
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.