Javascript Event Handling, Apr/5/2023

Today, I learned basic event handling in Javascript. 

This picture shows you how Javascript event handling works.

When we defined the event handler and registered it, we includes the event trigger in the code.

When user or page action triggers the event, the event executes by Javascript. 

 

There are three types of events.

• Mouse events
• Keyboard events.
• Form events.

This is just the reference we commonly use for handing events.

There is something called "DOM 0 Model" in Javascript. This uses event tag attribute!

 

This one is very basic event handler in Javascript. Here is another using function name to the associated event property on the object.

 

However, in real world, we mainly use the DOM 2 Model for diverse front-end. 

addEventListener() is for registering an event handler requires passing a callback function.

DOM 2 Model

In the function, we can see use only function name without parses. 

When the event occurs and an event handler is called. An object that implements the event interface associated with the event type is implicitly passed to the handler.

Sometimes, people use anonymous function passed to addEventListener() like below:

 

 

What are some events in mouse?

• click: The mouse was clicked on an element (press + release)
• dbclick: The mouse was double clicked on an element
• mousedown: The mouse was pressed down over an element
• mouseup: The mouse was released over an element
• mouseover: The mouse was moved (not clicked) over an element
• mouseout: The mouse was moved off of an element
• mousemove: The mouse was moved whille over an element

 

In class we have an exercise to change the element pic and text. The question is that change the picture and comment when we move our mouse over the image. 

 

Here is my code!

In this code, I have two variable name n, l to get element ID in HTML. 

We make the event using addEventListener() to change the image when user move mouse over the image. 

The triggered event is treat(). In treat() function, we change the image source to other image and change the text content below the image. 

 

The back() function is for return the original image when we move mouse out of the image. We put the previous image and comment again.

Now, we can see the result like this: