Tutorial [JS] Using EventHandlers

sunjester · 05-23-2020, 08:23 AM

Introduction
This tutorial will show you how to hook the window, document, and other HTML elements using javascript. During this tutorial we will be using the console in your browser. In Chrome you can access the console by pressing ctrl+shift+i. Hopefully this tutorial will also help you learn how to read software documentation. Learning how to read and use language documentation will help you become a great programmer. Utilizing Events will help give your web application/page more dynamic functionality. I will be using "vanilla" javascript. Vanilla javascript is pure javascript, without using libraries such as jquery. This tutorial will not be using jquery.

We will be working in two files (documents) during this tutorial, index.html and file.js. The javascript file will be loaded after the Body tag. The HTML file will be a simple boilerplate type of file (head, title, body, etc). All of the elements will be created at "runtime" in our javascript file.

Code:
<html lang="en">
<head>
        <title>Using EventHandlers</title>
</head>
<body>
</body>

<script src="file.js"></script>

</html>

Creating HTML Elements
It's quite easy to create HTML elements and add them to your HTML document. You will be using the createElement method. You can even create your own elements using this method. This method takes two parameters but only one of them is required. The options parameter is optional.

tagName
options

the first parameter (tagName) is the name of the HTML tag, such as p, li, form, dd, hr, etc. The second parameter is an options object that has the options for the tag we are creating. The method returns a new Element object. We are going to create a textbox element and add some options to it.

Code:
let txtBox = document.createElement('input');
txtBox.type = "text";
txtBox.value = "here it is";

document.body.appendChild(txtBox);

Above you can see that we created a TextBox element and added a value attribute to it (lines 1-3), then appended it to the body of our HTML document (line 5). You can find information on the TextBox element here. On that page you can find more attributes to add and edit. Let's go ahead and create a form element and then add a TextBox and a Submit Button to it.

Code:
let txtUser = document.createElement('input');
txtUser.type = "text";
txtUser.name = "txtUsername";

let txtPass = document.createElement('input');
txtPass.type = "password";
txtPass.name = "txtPassword";

let btnSubmit = document.createElement('input');
btnSubmit.type = "submit";
btnSubmit.name = "btnSubmit";

let frmLogin = document.createElement('form');
frmLogin.method = "post";
frmLogin.action = "https://www.google.com/";

frmLogin.appendChild(txtUser);
frmLogin.appendChild(txtPass);
frmLogin.appendChild(btnSubmit);

document.body.appendChild(frmLogin);

The above code is creating 2 textbox elements and a submit button, then appending them to a form element that was also created, and then appended to the body of our HTML document. If you submit that form it will try to POST the data to Google and you will get an error.

AddEventListener
The AddEventListener method is the magic behind hooking elements in the browser. We are going to hook the submit event for the form we created, stop the submission and then print the values of the textbox elements to our console.

Code:
//hook the form submit event
let frm = document.forms[0];

//listen for the event
frm.addEventListener('submit', function(event)
{
        //stop the form submit
        event.preventDefault();

        console.log(this.txtUsername.value);
        console.log(this.txtPassword.value);
});

Event Types
You can view some of the most common events that people on the Event reference MDN page.