Copyright

DOM Events & Objects in JavaScript Overview

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

We will explain what DOM events are, and how to use event listeners to trigger JavaScript code that will run when various events occur. These concepts will be demonstrated through examples. We will also discuss mouse, keyboard, and device events.

Overview of DOM Objects in JavaScript

As we know from previous lessons, the Document Object Model or DOM interprets the entire HTML document as an object. Like any object in programming, it means the document object has properties which can be manipulated using certain methods. Similarly, all elements inside the document object are called nodes in DOM terms, and have properties that we can work with using JavaScript methods.

DOM Events in JavaScript

An additional feature that enhances how JavaScript can be used to interact with the document are the DOM events. Events are changes that occur in a document. These can be caused by the user. For example, the user may click on an element and that will generate an event. Or they can occur without the user interacting directly with a page element. For example, when the browser has completed loading the document, a DOM event is generated and can be monitored using JavaScript.

Adding and Using Event Listeners

By including event listeners in the document HTML and/or the JavaScript code, we can use DOM events to act as triggers that run JavaScript commands. Event listeners are methods that trigger a JavaScript function to run when a specified event occurs. There are a few ways to add these to the document or script.

Inside an HTML tag

For example, we can place the onload event listener, which responds to the browser loading a specified element, inside the <body> HTML tag, and have it trigger the addColor() function like so:

<!DOCTYPE html>
<body onload="addColor()">
<div>
<p>This color will turn blue when the body element loads.</p>
</div>
<script>
function addColor(){
document.getElementsByTagName("DIV")[0].style.color="blue";
}
</script>
</body>
</html>

Using the addEventListener() Method

Another approach to add an event listener is to use the addEventListener() method directly inside the JavaScript code. Below is the same example as before, but this time using addEventListener():

<!DOCTYPE html>
<body>
<div>
<p>This color will turn blue when the body element loads.</p>
</div>
<script>
document.getElementsByTagName("BODY")[0].addEventListener("load", addColor());
function addColor(){
document.getElementsByTagName("DIV")[0].style.color="blue";
}
</script>
</body>
</html>

Notice how we identify the <body> element and add the addEventListener() method to it with this line of code:

document.getElementsByTagName("BODY")[0].addEventListener("load", addColor());

Note also that when using this method, the event syntax changes from onload to load, i.e. does not include the "on" prefix. Similarly, "onclick", for example, would be written as "click" when using this method, and so on.

Now let's have a look at a few popular types of DOM events. All the events listed below can be applied using one of the two approaches described above.

Mouse Events

Unsurprisingly, mouse events occur when the user performs certain actions in the document using the mouse. Some common mouse events are:

click - when the user clicks on an element.

mouseover - when the mouse cursor is placed over an element.

mousedown - when the user presses the mouse button while the cursor is over an element.

mouseup - the opposite of the above; occurs when the user releases the mouse button while the cursor is over an element.

Keyboard Events

Another way to trigger JavaScript code in response to user input is to use keyboard events. There are only three of these:

keydown - occurs while the user is pressing any key on the keyboard.

keypress - occurs when the user has pressed a key on the keyboard. Does not work for special keys, like Alt, Ctrl, Shift, and Esc.

keyup - occurs when the user releases a key which was previously pressed.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support