Events!
An indispensable part of a website. What gives users the feeling that they’re actually communicating with the website, not just reading a newspaper or watching a movie.
Events are simply understood that actions taking place in the browser can be created by the user or the browser itself.
For example, when the user clicks on an element, enters text into a textfield or moves the cursor on an element.
In this article, I will talk about two ways to handle events and use them properly for each case.
Using Event Handler
You can use the available EventHandler property of the object to be able to “catch the event”.
It sounds a bit complicated, but you probably did it without knowing its name.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> button <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">".btn"</span> <span class="token punctuation">)</span> button <span class="token punctuation">.</span> <span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// OR using Javascript one-liners make you look like a pro</span> button <span class="token punctuation">.</span> <span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
In this example, the onclick property is used so that when the user clicks on the button, it will print the words “Hello!” enter the console log.
The “onclick” attribute is just one of the available EventHandler . Here are some common properties that can be used.
| No | Event Name | description |
|---|---|---|
| first | onclick | Event occurs when the HTML tag is clicked |
| 2 | ondbclick | Event occurs when double clicking on HTML tag |
| 3 | onchange | An event occurs when the value of the HTML tag is changed. Usually used in form input tags |
| 4 | onmouseover | The event occurs when the mouse pointer starts entering the HTML tag |
| 5 | onmouseout | The event occurs when the mouse pointer starts leaving the HTML tag |
| 6 | onmouseenter | Similar to onmouseover |
| 7 | onmouseleave | Similar to onmouseout |
| 8 | onmousemove | Event occurs when the mouse moves inside the HTML tag |
| 9 | onkeydown | Event occurs when typing any key in the input box |
| ten | onload | The event happens when the HTML tag starts running, it’s like an object-oriented constructor. |
| 11 | onkeyup | An event occurs when you type, but when you release the key, it is triggered |
| twelfth | onkeypress | An event occurs when you press a key in the input box |
| 14 | onblur | Event occurs when the mouse pointer leaves the input box |
| 15 | oncopy | An event occurs when you copy the content of the tag |
| 16 | oncut | An event occurs when you cut the content of the tag |
| 17 | onpaste | An event happens when you paste content into a tag |
Add Event Listener
In addition to the above EventHandler properties, we can also add an event to the object through the addEventListener .
By adding an event listener to an object, we can capture a series of events generated by the user or browser.
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> button <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">".btn"</span> <span class="token punctuation">)</span> button <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token comment">// OR using Javascript one-liners</span> button <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> |
Instead of using the onclick property, here I use the addEventListener() method:
1 2 | target <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> event <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">,</span> useCapture <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
target: This is the element you need to add Event Listeners to. (Using DOM Selector ).event: Are the types of events such as click, mouseover, … (You can see here )function: The name of the function you need to add
Difference between Event Handlers and addEventListener
If you will be using EventHandler , the most obvious difference is that if you add an event for the same type (e.g. onclick on the button), then the 2nd event will overwrite the first event and only the that event is enforced. The reason is due to:
For a given element, you can only have one
event handlerper event type, but you can have multipleevent listeners.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> button <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">".btn"</span> <span class="token punctuation">)</span> button <span class="token punctuation">.</span> <span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> button <span class="token punctuation">.</span> <span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"How are you?"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// When click button</span> <span class="token comment">// "How are you?"</span> |
At times like this we will need the addEventListener
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> button <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">".btn"</span> <span class="token punctuation">)</span> button <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> button <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"How are you?"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token comment">// This will log to the console</span> <span class="token comment">// "Hello!"</span> <span class="token comment">// "How are you?"</span> |
How should I use it?
Which method you should use depends on where to use it.
Do you need to add multiple events to an element? Will the addition of that element be needed in the future?
Yes, that’s why the addEventListener is recommended.