Hello everybody. Welcome to the JavaScript course.
In this video I'm going to discuss custom events So JavaScript can really generate its own events.
So we can use the event class and use the dispatch event function to do so. And also we can create our
custom event class with the detail field included Also I'm going to tell you some standard UI
events that we can use directly without creating our events for those standard ones. Now let us see
the HTML file first. The HTML file has a number
of things here. I have a title here. And then I link
this HTML file to a CSS file. So the CSS file is called styles.css. And after that, I have a body
the body has a heading here. And underneath the body, I have a division called my box. So now the
division has become a rectangle in yellow. So how can I do so? Let us go to the CSS file. So the CSS
file has determined the width, the height and the background color of that division. So that's
why I can see such a small box in yellow, okay And
of course I have to link my uh JavaScript
file to the HTML file. And the JavaScript file is called myScript.js, which is put in the js
folder, okay. So we can see the hierarchy of the files on the left hand side. So uh index dot HTML
together with the styles.css are placed at the same level. And after that I have a js folder,
and the js folder contains my JavaScript file, okay. Now let us go to the JavaScript file. In order
for me to use the strict mode, I have to say "use strict" on the f
irst line of of the JavaScript file.
And here comes our topic for today. So rather than waiting for the user-generated events, JavaScript
can actually generate its own events. So JavaScript can do something like this. It can generate its
own events, or it can generate some ordinary events such as the mouse events or the keyboard
events. So let us see the way to really generate the event from JavaScript itself. So there are
some ways to do so. One of the ways is to create a new event object
from the event class. So the
event class is a built-in class. So we can make use of this built-in class to generate an event
in JavaScript. The format is like this. We use let event equals new event. And we include the type
of the event together with some options. So the type here can be ordinary event types, or our user-
defined types. So the ordinary types can be like that: click, context menu, mouse over, and so on. In
addition, we can make use of our own user-defined event types as well
, which will be discussed
later. And options here has to be careful. The options part contains two attribute-value pairs:
bubble equals false, and cancelable equals false by default. So bubble here means the ordinary bubbling
of um JavaScript. It means that the descendant can trigger the events on the ancestors. So the
cancelable part here means something like this If we set cancelable equals true, it means
that we allow prevent default function to be called. So by default, we don't allow t
he
prevent default function to be called, okay So these pairs are the default um settings,
okay. So let let us see an example. Suppose I just pick up this particular um box, which is
called my box in the HTML file, which is this one. So um my box is here and my box is
already obtained by the get element by ID method in JavaScript, okay. So I have this
my box variable, meaning this division, which is already in yellow color. So let us try
to set up an event object using the event class. So
I use the event class and I give
the type of this event called show string, okay. So I'm going to show some string
when this event happens, okay. So the event object is called my event, okay. And
after that I can make an event listener So you can see that I can set up an different
listener, so that when the show string event has been triggered, um the my box element is going
to do something. So I'm going to set up some string in my division, saying that the new text
has been added due to t
he event, okay. So after I have set up an event listener, how can I really
tell JavaScript to use the event object? Let me show you my way. The idea is to do something like
this event target. dispatch event. And I put the event object into the argument of the dispatch
event function. So in order to generate an event, we really dispatch this custom event from the
event target. So how can I do so? Let me show you my way. So the idea is like this. I have set
up a event listener for my box, oka
y. So this is the my box element, so I want this element to
dispatch an event called my event. So this event object has already been passed to the dispatch
event um function, okay. So after doing so, the element called my box is really able to make
up an event. And the event listener here will try to do something in response to the event
called my event, okay. So let us see the result Save, reload. Yes, you can see that the new text has
been added into the division. So the idea is like this
. I set up an event and I make an event
listener to uh take care of this particular event object, whose type is called show string,
okay. So when there is an event of type called show string to be dispatched already
from the um element, the event listener here is trying to do something uh contained in this
function, so that I can see some new text here, okay. So that is the basic principle of making a
custom event, okay. And I can show something more about the custom event. So I can have uh
property
called is trusted. So if the event is really created by a real person not by JavaScript itself,
is trusted variable becomes true; otherwise, it will be false. So since this event is generated
by JavaScript, not by a real person, you can expect that the is trusted variable will turn false
in my case. So let us see how I can use this property So I have set up a string like this one. If the
event is not trusted, that means if the event is generated by JavaScript, I can add some strin
g
more after the uh "new text added" string, which is already shown, okay. So let us see the result.
Save, reload. Yes, you can see that in addition to the string given by the uh event called um
my event, I can also show that the um event is really generated by JavaScript, not by humans. So
you can see that I have some additional string added after the original string called new "text
added", okay. So we can make up our own events. And we can tell JavaScript to generate that event. And
the
event can be listened by any event listener, okay So after generating an event, and after we have
dispatched this event to a certain element, we can use the event listener to do something in
response to this custom event. So that is the basic idea, okay. After that, we can talk about
another topic called standard UI event classes Okay. So there are some standard event classes
related to the user interface. For example, we have the UI event class, mouse event class, focus
event class, and k
eyboard event class, and so on We can use these event classes when we create
these events because there are some specific properties for us to use. So if we focus on these
um events that are generated by JavaScript, we can use these events uh directly without creating
our event class, like what we did uh for the last part, okay. So let us see an example about
it. I want to do something about the keyboard event, okay. I set up a keyboard event object called
my event 2. So the idea is like th
is. When I press a certain key, I want to generate an event of
key down type. So when JavaScript wants to uh use this event object, the key to generate by the
JavaScript will be j. And also the shift key will be pressed as well. So that's why shift key equals
true. That means I'm have told JavaScript to make a custom event that is like pressing a shift key,
okay. So how can I make use of this event? Let us see. So I just want to show the
key and the shift key um pressed by JavaScript itself
, not by a real
person. So how can I do so? Let us see Save, reload. Yes, you can see that I have the key
called j being printed out. And I have seen the value called true on the web page. That means
um the shift key is really pressed. So when I use this event, the key to press is just j. And
the shift key is also pressed at the same time, okay. So these things are special to the uh
keyboard event class. So we can make use of these special UI properties provided by these
um standard UI eve
nt classes. So we can make use of them to facilitate our job. We don't
need to um create our own event class and uh do something similar to the previous
part by writing everything by ourselves, okay. Another part to talk about is the custom
event class. The custom event class can help us make our own event object with the user-defined
event name. So we also have a detail field which is provided to input some key value pair of
our own information. So we can see that the custom event classes
quite similar to the
event cast that I showed you um previously like this one, okay. But this um custom event
class is a bit more special because we can use the detail field to include some custom
information. So let us see an example about that. Okay. I set up my um custom event
called my custom event, okay. And I use the custom event class. The type is called
print data. So I'm going to print some data So the detail of this uh custom event object
is like this. I have a key-value pair. Th
e key is the day and the value is just the value
obtained by the get date function from a date object called now, okay. So I want to see
the day of a week. So I can use this detail later on. And then I can set up my own event
listener to listen to the uh print data event, okay. So the idea is like this I set up an event
listener to listen to the event of type print data. And when this event is really triggered, I
do something like this. The event object is put into the function, and then th
e function tries
to uh add some inner HTML content to my original um box called my box, okay. So we can see that
I want to print out the day of week using the event. detail. day. So this event refers to the
event object here. So this event object has a detail field and I can pick up the value of
this day key, okay. So event. detail. day would just refer to this uh day of the week obtained
by the date object called now, okay. So now I just dispatch this event called custom event, okay. So
t
his custom event will be triggered by JavaScript itself. And the event listener is able to uh do
something in response to the dispatched event. So let us see the result. Save, reload. Yes, you can see
today is day one. So day one means Monday, okay. So I made this video on Monday, okay. So day one means
Monday, okay. So you you can see that I can dispatch an event which is made by me. So when I dispatch
this event, JavaScript is able to do something in response to this custom event. So the p
rint data
type is matched. So this custom event has the type called uh print data. So when the event listener
listens to this uh print data type of event, uh you can do something in response to such an
event, okay. So we can see that using custom event class. We can do something about the detail,
which is put in the form of key-value pairs, okay So this video has already talked about the way to
set up custom events. The first way is to use the event class which is a built-in class. And we s
et
up an event listener in response to the event of this particular type that I set up in my own way.
And then I can just dispatch this um event to a certain element in the DOM tree, okay. So when this
event is already dispatched, javaScripts is just like a real person who generates the event, okay.
But of course JavaScript is able to distinguish whether that event is generated by JavaScript itself
or by a real person. So we can use the is trusted property to see whether the event is genera
ted
by JavaScript or not, okay. Also there are some standard UI event classes in JavaScript. Now I
used the keyboard event class as an example. So these events provide some special properties for
us to use. That's why we don't need to create our own uh event for these standard UI events, okay.
And we can also set up a custom event class to include some detail that is put into a field
of the custom event object. So we can add some key-value pairs of custom information. So in
my case, I add
up uh detail about the day of a week that I triggered this event. And of course,
after that, I can make up an event listener to listen to that particular uh type of event
called print data in my case. And then I just dispatch this event called my custom event. Then
JavaScript can help us do something in response to the custom event that I uh dispatched. This is
the end of the video. If you have any questions about my video, please leave your questions
on the comment section below the video.
If you like this video, please give me a like and please
subscribe to my channel. Thank you for watching
Comments