Feeling lost on Dom Events?

DOM EVENTS EXPLAINED

Introduction

You might be asking what are DOM events, and how on earth am I going to get this for a code challenge. Well, let's start with the technical definition

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.
(Introduction to the DOM - web apis: MDN)

So now that we have defined DOM, let's talk about what DOM Events are. These events, are what we use as programmers to influence, manipulate, change and create web sites or pages. It does this by organizing all the data into objects. So everything you see even on this page is an object. For example, this web page has a document object that serves as the document all on its own. This also includes table objects, that put into effect/action the HTMLTableElement DOM interface, allowing it to gain access to HTML tables, pretty much all of it is objects. JavaScript uses the DOM to access the web page and all of its elements. The DOM is not a language in itself but rather a tool, but without it, the JavaScript would have no template/framework or even concept of what web pages are, ex. HTML documents. Everything within the HTML, like the head, tables and its headers, even the text you see in the cells of that table, and every other element are parts of the DOM for that HTML. They can all be accessed and changed using the DOM and JavaScript. It allows these two different documents to communicate. We now can talk about these specific types of events of the DOM.

TYPES OF EVENTS

1.Mouse: Is any event in which you, as the user, create events that interact with actions of the mouse like scrolling, clicking, moving the mouse.In dom we call these: click, scroll, and mouseover.

2.Keyboard: Is any instance in which the user types on the keyboard, such as hitting or tapping a key. In DOM we call these: keydown, keyup, and keypress events.

3.Form: Is any interaction with a form and any of its elements, like creating forms and even altering data in the forms. In DOM we call these: submit, focus, and change.

4.Window: Is any interaction with the page itself. Like anytime we refresh or load a web page, close one, resize it. In DOM we call these:load, unload, and resize.

JAVASCRIPT AND DOM

In JAVASCRIPT in order to do these events, we use what is referred to as event listeners, these are functions that we create in JS that can perform or execute, a wide array of actions, like grabbing and changing the amount of inventory, or console.log() something so the programmer can make sure his function is rendering properly on the front end. So let's see how just a couple of these events look in code.

NOW CODING

This is how it looks when you are doing this when coding in your .JS file and .HTML file

These are just a couple of events you can do and how they are structured in the code.

CONCLUSION

I hope this helps you, the reader and user, and maybe even another fellow coder, understand DOM Events. We talked about what the DOM stands for. What type of events you can do with the DOM. How the DOM is essential to create all the elements we see. Knowing how JavaScript manipulates and pulls info from Html will be essential for any website building. Have fun coding!

Sources:

“Introduction to the DOM - Web Apis: MDN.” Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction.