eventListeners in JavaScript

The transition from creating a web site with exclusively Rails, and moving on to building a full stack application with both Rails and JavaScript is definitely an adjustment. Through the MVC conventions that a Rails only application has, we build out each page separately in the views folder. While this can be great for learning how to build a web application, and definitely helps in being able to learn through typing out an abundance of code, it is not how web applications are actually built out in every day life. In reality, the views portion of the application are actually built out in a separate coding repository in a JavaScript language.

In JavaScript, applications are single page, with the page we are manipulating what is called the DOM file, which is our HTML page where we will be displaying the information kept in our Rails backend. In Rails, if we want to link to a specific view, we the link_to method, followed by the path that we want to be directed to. However, this option is simply not available in JavaScript. To be able to get the information that we want, we will not be redirecting to a new page. Instead, we will be rendering content when we need it by manipulating the DOM. In order to render new information to the DOM, as well as to accomplish a number of other valuable tasks, one of the tools we have at our disposal is an Event Listener. Event Listeners, or .addEventListener as it is written out in JavaScript, takes in two arguments, one is the action which will enact the action, the second argument is the callback function that will be enacted when that action occurs.

As an example, let's say that we have function that we called createForm(). In this function, we are rendering a form for a user to sign up for our application.

function createForm(){

let usersForm = document.getElementById(“users-form”)

usersForm.innerHTML +=

`

<form>

Name: <input type=”text” id=”name”><br>

Username: <input type=”text” id=”username”><br>

Email: <input type=”text” id=”email”><br>

<input type=”submit” value=”Create User”>

</form>

`

usersForm.addEventListener(“submit”, userFormSubmission)

}

Cool, so this will render our form, but forms by their very nature were made to be submitted, and have their data posted to the database, and then, naturally, the browser. As you can see, the event listener has its action, “submit”, and its callback function, userFormSubmission. Let’s take a look at the callback function:

function userFormSubmission(e){

e.preventDefault();

let name = document.getElementById(“name”).value

let username = document.getElementById(“username”).value

let email = document.getElementById(“email”).value

let user = {

name: name,

username: username,

email: email

}

fetch(`${BASE_URL}/users`, {

method: “POST”,

headers: {

‘Accept’: ‘application/json’,

‘Content-Type’: ‘application/json’

},

body: JSON.stringify(user)

})

.then(resp => resp.json())

.then(user => {

let u = new User(user.id, user.name, user.username, user.email)

u.renderUser();

})

}

As you can see in the code, we are taking in this information, posting it to the database, and then rendering the new JavaScript objects to the browser. While this is definitely a new way of thinking about things in regards with how to render information through our database and to our user, it is highly effective and definitely worth learning.