JavaScript DOM HTML Events for Absolute Beginners Lesson #11

Lets discuss DOM events in HTML with JavaScript. In the last lesson the event we were calling upon was the “onclick” event. We used a button to accomplish what we wanted. Today were are going to discuss the following events.

  • onclick
  • onload
  • onchange
  • onmouseover
  • onmouseout
  • onmousedown
  • onmouseup
  • onfocus

 

Setting Variables in JavaScript

In the last lesson we were writing document.getElementById(‘foo’).style.color=”red”; over and over again. There is a shorter way to do this. I want you to get use to setting variables in JavaScript because it is going to help you in the future. Instead of writing this syntax over and over again, you can write it one time and store it in a variable. Let me show you.

Only cool people share!

var x = document.getElementById('foo');

 

This is all you have to do to set your variable. Of course you would have it in a script tag and possibly a function like we discussed. Now anytime you want to do something with the id of “foo” you can just use an “x”. This is because “x” is holding the entire string of document.getElementById(‘foo’);. So let me write it out for you both ways so you can see the difference.

NOTE: Do not forget your script tags when using the codes below. 

The Old Way of Writing JavaScript

document.getElementById('foo').style.color='red';
document.getElementById('foo').style.display='block';
document.getElementById('foo').innerHTML='We change';

 

Compare to the New Way of Writing JavaScript

var x = document.getElementById('foo');
x.style.color='red';
x.style.display='block';
x.innerHTML='We change';

The Difference in Writing Styles

The difference in these writing styles will give you the advantage when you are writing a lot of different commands to manipulate the DOM.

Calling Onclick Events

To call an onclick event we simply use this syntax inside a tag or element. onclick=””. We have used it in a button before but did you know that we can use it in any element? Check out this code.

<div id="foo" onclick="change()">Hey there</div>

function change(){
var x = document.getElementById('foo');
x.style.color='red';
x.innerHTML='We change';
}

Calling Onload Events

The onload event can only happen in the body element. This one is unique this way. You cannot put it in a div or any other element not even the html tag. So if we wanted to load something with the DOM loaded we can use onload in the body tag.

<body onload="change()">

<div id="foo">JavaScript Absolute Beginner Web Development</div>

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

Calling Onchange Events

Lets say that you had some forms with input type of text. If you wanted everything to be capitalized and turned red you would have a function like this. This will change after the user enters text and then clicks somewhere else on the page. It will also change if they push the “tab” key on their keyboard.

<input type="text" id="foo" onchange="change()">

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

Calling Onmouseover Events

This event happens when someone put their mouse over an element. The element will have an onmouseover event in it. Here is an example.

<div id="foo" onmouseover="change()">This is a mouse over event.</div>

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

 

Calling Onmouseout Events

You will use this event when you want an event called when a user mouses out of an element on a webpage. Here is an example.

<div id="foo" onmouseout="change()">This is a mouse out event.</div>

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

Calling Onmousedown Events

This event will happen when someone pushes their mouse button down. here is an example.

<div id="foo" onmousedown="change()">This is a mouse DOWN event.</div>

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

Calling Onmouseup Events

You will notice that this even only takes place when the user releases their mouse button. here is an example of onmouseup event.

<div id="foo" onmouseup="change()">This is a mouse UP event.</div>

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

Calling Focus Events

This event is used a lot with forms. When a use clicks or “focuses” on something we can make something happen. Here is an example useing the focus event.

<h1>JavaScript DOM HTML Events for Absolute Beginners</h1>

<input type="text" id="foo" onfocus="change()" />

function change(){
var x = document.getElementById('foo');
x.style.color="red";
x.style.backgroundColor="pink";
}

 

Next Lesson

JavaScript DOM HTML Events for Absolute Beginners Lesson #11 was last modified: October 29th, 2021 by Maximus Mccullough
Summary
JavaScript DOM HTML Events for Absolute Beginners Lesson #11
Article Name
JavaScript DOM HTML Events for Absolute Beginners Lesson #11
Description
Lets discuss DOM events in HTML with JavaScript. onlci, onmouseover onfucus and more. easy to understand tutorials with video instruction.
Author
Publisher
A1WEBSITEPRO LLC
Logo
JavaScript DOM HTML Events for Absolute Beginners

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.