When listening changes meaning

By Marina Ramos y Raquel Dacosta

When you consider learning a new language you think it will be English, German … But no! we decided to learn, JavaScript!

And, as in all learning, there comes that moment when you begin to understand that language but you can not speak it; and little by little you are capturing concepts …

So, to be able to lend a hand to anyone who goes through this phase we are going to tell you one of the most curious moments of this learning experience.

The new meaning of the verb: listen:

JavaScript listens .. yes, as it sounds. More specifically, it listens to events. Which brings us to the next concept; What is an event? It is the moment in which something happens on our page and that will generate, for the novice, that the behavior of this is one or the other.

Once this is clarified, we will see the most common events that can be listened to with JavaScript and for that we will use the addEventListener function.

We can specify the most common events in the following groups: mouse events, keyboard events and HTML events.

Mouse events. They are the most used and some of them are:

* Click: This occurs when the left mouse button is pressed. It also occurs when the focus of the application is located on a button and the Enter key is pressed.

* Mouseout: When the mouse pointer is inside an element and the user moves the pointer to a place outside that element.

* Mouseover: The mouse pointer is outside an element and the user moves the pointer to a place inside the element.

* Mousemove: Occurs (continuously) when the mouse pointer is on an element.

Keyboard events:

* Keydown: When any key on the keyboard is pressed. This also occurs continuously if the key is held down.

* Keyup: This occurs when any key pressed is released.

* Keypress: This occurs when a key corresponding to an alphanumeric character is pressed (keys such as SHIFT, ALT, etc. are not taken into account).This also occurs continuously if the key is held down.

HTML events. The most commonly used events are:

* Focus: Occurs in any element (including the window object) when the element gets the focus.

* Blur: When the element loses focus.

* Scroll: This occurs in any element that has a scroll bar, when the user uses it.

* Resize: When resizing the browser window.

We can find other types of events, such as:

* Cut: The selection has been cut and copied to the clipboard.

* Copy: The selection has been copied to the clipboard.

* Paste: Element pasted from the clipboard.

Of course, there are many more events so we provide this link where you can find a fairly complete list:

https://developer.mozilla.org/en-US/docs/Web/Events

We hope that these tips will be helpful in your future coding work. So, everyone get ready to listen!