1 Star2 Stars3 Stars4 Stars5 Stars (15 votes, average: 5.00 out of 5)

JavaScript DOM HTML Events for Absolute Beginners Lesson #11

JavaScript DOM HTML Events for Absolute Beginners

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.

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

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
A1WEBSITEPRO LLC

Related Post

JavaScript DOM HTML Events for Absolute Beginners Lesson #11 was last modified: June 22nd, 2017 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider buying me a drink.

Drinks

Leave a Reply

Your email address will not be published. Required fields are marked *