Locked lesson.

Upgrade

About this lesson

What is an event, and what can you do with it?

Exercise files

Download this lesson’s related exercise files.

Understanding Events.docx
59.1 KB Understanding Events - Solution.docx
59.4 KB

Quick reference

Understanding Events

Events are what people often think of when they think of JavaScript.

When to use

Anytime you want to allow the user to interact with the page - clicking on things, mousing over, etc - use events.

Instructions

There are many JavaScript events. Several popular ones are:

onclick

onload

onchange

onmouseover

onmouseout

To use onclick:

<h1 onclick="this.innerHTML = 'Goodbye World'">Hello World!</h1>

To use onclick to call a function:

<script>
    function myFunction(id) {id.innerHTML = "ha!";}
</script>

To use onload:

<head>
    <script>
        function popup(){alert("My popup message");}
    </script>
</head>

<body onload="popup()">

To use onchange:

<head>
    <script>
        function upperCase(){
            var field = document.getElementById("name");
            field.value = field.value.toUpperCase();
        }
    </script>
</head>

Enter Your Name: <input type="text" id="name" onchange="upperCase()>

To use mouseOver:

<p id="first" onmouseover="mOver(this)" onmouseout="mOut(this)">This is some text...</p>

<script>
    function mOver(thing) { thing.innerHTML = "Mouse Over";}
    function mOut(thing) {thing.innerHTML = "This is some text...";}
</script>

Hints & tips

  • There are lots of JavaScript events
  • Use them when you want some user interaction on a web page
Login to download
  • 00:04 In this video, I wanna talk about events.
  • 00:07 And events are what people often think of when they think of JavaScript.
  • 00:09 You know, we click on something on a webpage and something happens or
  • 00:13 we scroll over it with our mouse and something happens.
  • 00:16 That's JavaScript.
  • 00:17 You click on a link on a menu and you get a drop-down thing, that's JavaScript.
  • 00:21 That's what people think of and those are all events.
  • 00:23 So clicking on things it may be a very common event but it's not the only one.
  • 00:27 We also have onload events and onunload events.
  • 00:30 Those things make something happen whenever a page loads or unloads.
  • 00:34 There's something called onchange event which reacts to changes in a form field.
  • 00:39 So if you're filling out a form online and something changes.
  • 00:41 That is an on change event and like I mentioned there is the mouse over which
  • 00:45 changes when you scroll over something.
  • 00:47 And there is a bunch more.
  • 00:48 So let's sort of jump in and start playing with these things and
  • 00:51 let's start with on click.
  • 00:52 That's sort of a common one.
  • 00:53 And it can be called write inside a html tag like this.
  • 00:57 In fact let's just go up to our H1 tag and paste this in.
  • 00:59 And it's just on click equals and
  • 01:02 then whatever you want to do is inside double quotation marks.
  • 01:06 And then you see inside of this double quotation marks we have single quotation
  • 01:09 marks that allows us to do something else inside of the something else that
  • 01:12 we've just done.
  • 01:13 And if you see it's just we're just adding this dot HTML we've done HTML before.
  • 01:18 And this is just saying do it to this thing, and
  • 01:20 it's saying change it to Goodbye World.
  • 01:22 So if we save this, come back here and hit Reload.
  • 01:25 And now everything looks the same, but if we click on our H1 tag, boom,
  • 01:28 it just changes, so that's on click, very cool.
  • 01:31 In fact, let's get rid of this.
  • 01:32 From the last video there, clean that up a little bit.
  • 01:35 So we can also do onclick to run a function, right?
  • 01:37 If we change this to, let's say.
  • 01:40 Well, let's just keep this the same.
  • 01:41 Underneath it, let's put another one.
  • 01:43 In h1 and onclick we're gonna call this function, right,
  • 01:47 and we're gonna pass in this to it.
  • 01:49 So come down to our script area just paste this in.
  • 01:53 And our function's very simple, it's just changing the id in our HTML,
  • 01:57 which is this id, which is this this, the parameter that we're passing in,
  • 02:01 basic function stuff.
  • 02:03 We're just changing the text to ha.
  • 02:05 So if we save this, come back here, and hit reload we see,
  • 02:08 click on this, boom, ha!
  • 02:09 Doing the same thing basically it's just doing it inside of a function.
  • 02:12 So, now let's look at onload.
  • 02:14 When a webpage loads, and oftentimes with on load stuff you're gonna wanna put your
  • 02:19 actual script up in the head tag.
  • 02:21 We talked way earlier about sometimes JavaScript goes in the head,
  • 02:24 tab this over.
  • 02:25 So I'm just gonna put a function in here.
  • 02:27 And the function is called popup,
  • 02:29 and it's just going to give an alert that does this.
  • 02:32 So, in order to do this, what we're doing is we're asking our site
  • 02:36 to do something when it loads, and when a thing loads, the body tag gets called.
  • 02:41 That's the big tag that holds everything, so onload in our body tag,
  • 02:45 we're gonna call this function.
  • 02:47 So, if we save this, come back here and hit reload, the page loads and boom,
  • 02:50 what an amazing pop up message.
  • 02:52 Pretty simple.
  • 02:53 So, another useful event is when somebody fills out a forum and
  • 02:56 after they leave the forum field.
  • 02:58 Well after they tab to the next field, you might want to do something like change
  • 03:01 what they typed into upper case or give a little alert or something.
  • 03:05 So, likewise, we're gonna put this function in our head tag and
  • 03:09 I'm just gonna go ahead and delete the one we just did and
  • 03:11 I'll put all this code in the resource file, so you can take a look at it.
  • 03:15 So, we're just gonna call a function called uppercase.
  • 03:18 And it's just gonna grab a field and grab it by the name and
  • 03:22 then just give it this field value to upper case.
  • 03:25 This is just a built-in JavaScript that converts things to upper case.
  • 03:29 So to use this we need a form so
  • 03:32 I can just come down here and just gonna paste in a basic form,
  • 03:37 save this, and you can see onchange I've given the uppercase.
  • 03:41 That's just calling this function.
  • 03:42 So if we come back here and hit reload, boom, we have this name.
  • 03:45 If I type in John Elder and then tab away, boom,
  • 03:48 it converts it to uppercase just like that.
  • 03:50 So that's pretty cool.
  • 03:50 And finally real quick let's do mouse over.
  • 03:53 And a quick way to do that just going to space down,
  • 03:57 and we're just gonna call a p, given an id of first, just like our old one here, and
  • 04:02 onmouseover, gonna give it this mOver this is just camel case and mOut.
  • 04:08 So when you move mouse over a thing that's an Over
  • 04:10 when you pull your mouse away that's a mouse Out.
  • 04:12 And so if we just save this, come back here and
  • 04:15 hit reload we see this is some text.
  • 04:17 We've gotta actually define these functions real quick, so
  • 04:20 let's just delete this, past this in.
  • 04:22 So we have two functions here.
  • 04:23 This is for mouseover and this is for mouseout and we're just
  • 04:28 changing the text for each one, using our innerHTML like we've done before.
  • 04:31 If we save this, come back here and hit reload.
  • 04:33 Boom, If we scroll over, if we pull it away, over, away, over.
  • 04:38 So very cool, very simple.
  • 04:40 So this was a whirlwind video,
  • 04:42 we crammed a whole bunch of stuff in here really quickly.
  • 04:44 But those are a few very popular events, in the next video I'll
  • 04:48 talk about event listeners, and we will go into a little bit more detail.

Lesson notes are only available for subscribers.

Gift this course