Event in Javascript

Tram Ho

Preamble

When working with javascript, you must be familiar with the event (event). So what is the event? And what is the effect of the event?

As for the definition of listening, the event is an action that acts on the HTML object that we can catch this event and perform certain actions.

In terms of practicality, we have this example: Suppose you build an account registration form and you want to catch the event when the user CLICK on the registration button shows actions such as data validation and notification if users enter content incorrectly, .. So you need to remember that each event we can perform many different actions and how many actions depend on each specific function.

Events (Events) in javascript

Mouse event (mouse)

When using the mouse, we have mouse movements, click, double click, right click, … Corresponding to that in javascript, there are also the following events:

  • onclick : The event occurs when the user clicks on the element
  • ondblclick : The event occurs when the user double-clicks on the element
  • oncontextmenu : The event occurs when the user right-click to open the context menu (press the menu key on the keyboard, okay)
  • onmousedown : An event occurs when the user presses a mouse button on the element (including the middle mouse button)
  • onmouseup : The event occurs when the user releases the mouse button over an element

You will understand more about the event click to see an example of this . Note: – When users click, double-click, right-click the event happens onmousedown , onmouseup and attached the corresponding event. – Events onmousedown , onmouseup will happen before onclick , ondblclick , oncontextmenu – If the user presses the element, but move the mouse away to release the button. ?. Now the onmousedown event will occur and onmouseup with onclick will not happen on the first element. The inevitable function of the click event on the head element will not be performed. The place where the user releases the mouse button will have an onmouseup event with onclick and perform the mouse click function. – When users double-click , it means that the text will be double-click . To prevent this we should use the attribute ‘user-select: none;’ of css. See the following example

  • onmousemove : The event occurs when the mouse pointer moves over the element
  • onmouseenter : An event occurs when the mouse pointer moves into an element
  • onmouseover : An event occurs when the mouse pointer moves into its element or children

For example:

Events in opposition to onmouseenter and onmouseover are onmouseleave and onmouseout .

  • onmouseleave : An event occurs when the mouse pointer moves away from the element
  • onmouseout : An event occurs when the mouse pointer moves away from its element or children.

Keyboard event (Keyboad)

  • onkeydown : An event occurs when a user is pressing a key (will be activated with all keys)
  • onkeypress : An event occurs when a user presses a key (some keys will not trigger this event such as alt, shift, ctrl, esc, backspace, delete, arrow keys …)
  • onkeyup : An event occurs when a user releases a key

Frame event (Frame)

  • onresize: An event occurs when the user changes the browser size
  • onscroll: The event occurs when the element’s scrollbar is scrolling

Note : * When you change the window size, the scrolling position of the affected page will also trigger the scroll event

Form event

  • onfocus : An event occurs when the component is focused. A component is focused as an input cell with a pointer inside. A tabbed or clicked check box or radio box will also trigger the focus event.
  • onblur : Contrary to the onfocus event. The event occurs when the component leaves the focus.
  • onchange : The event occurs when the component has changed its content and value. For cells <input> , <keygen> , <select> , and <textarea> .

For the input box when the user changes the value of the input cell and exits the blur input box, the new onchange event is activated. When the user enters data into the input or textarea box, I need to get the value to validate. We will use the oninput event below.

  • oninput: An event occurs when a user enters a value in the input or textarea box. Note : * For select, checkbox, radio, there is an oninput event but depending on the browser you use. Like google chrome, there is no oninput event for checkbox and radio boxes. So only oninput events with input cells should be used.
  • onselect: The event occurs when the user selects some text in the input box (input text, textarea, keygen)
  • onsubmit: Event occurs when the form is sent.
  • onreset: The event occurs when the form is reset to default value.

Clipboard event

  • oncut: An event occurs when a user cuts the content of a element
  • onpaste: An event occurs when the user pastes some content into the element
  • oncopy: An event occurs when the user copies the content of an element.

Functions of common events:

  • preventDefault (): Prevent the event from executing the default function. For example, if we have a submit () form event, but we do not want it to be submitted normally but using ajax to send a request, we will use the preventDefault () function to prevent normal submission form.

  • element.addEventListener (event, function)
  • element.removeEventListener (event, function)

Epilogue

Above are some common events used in Javascript. Working with Javascript can not forget the concept of the event so be sure to learn this lesson. See you in the next article!

Share the news now

Source : Viblo