This is the 21st day of my participation in the August More Text Challenge

The preface

We often use events in the browser, but for us, we just call the API and don’t even know how the event is triggered and why the event executes our callback function. Today we’ll take a closer look at the issues related to browser events.

Events in the browser

An event is a signal that something has happened. In the browser, each DOM signal is an event, and different signals are emitted according to different operations. These are different events.

  1. Click – When the mouse clicks on an element (this happens on touch screen devices).
  2. Contextmenu – When an element is right-clicked.
  3. Mouseover/mouseout – when the mouse pointer moves in/out of an element.
  4. Mousedown/mouseup – when the mouse button is pressed/released on the element.
  5. Mousemove – When the mouse moves.

Keyboard events:

Keydown and keyUp — when a key is pressed and released.

Form element events:

  1. Submit – When the visitor submits one.
  2. Focus – When a visitor focuses on an element, such as focusing on one.

Document event: DOMContentLoaded – When the HTML has been loaded and processed and the DOM is fully built. CSS event: TransitionEnd – When a CSS animation completes.

Event handler

In response to an event, we can assign a handler, a function that fires when an event occurs, which we define as a callback, in the following ways

HTML features

Handlers can set attributes in HTML called on. For example, to assign a click handler to an input, we can use onclick, like this;

<input value="Click me" onclick="alert('Click! ')" type="button">Copy the code

When the mouse clicks, the code in onclick runs. HTML features are not a good place to write a lot of code, so it’s best to create a JavaScript function and call that function in the HTML features. Here click will run countRabbits() :

<script> function countRabbits() { for(let i=1; i<=3; i++) { alert("Rabbit number " + i); } } </script> <input type="button" onclick="countRabbits()" value="Count rabbits!" >Copy the code

As we know, HTML feature names are case insensitive, so ONCLICK works just as well as ONCLICK and ONCLICK. But the feature is usually lowercase: onclick.

DOM attributes

We can assign handlers using the DOM property on. For example elem. Onclick

<input id="elem" type="button" value="Click me">
<script>
  elem.onclick = function() {
    alert('hello coolFish');
  };
</script>
Copy the code

If a handler is assigned by an HTML attribute, the browser then reads it and creates a new function from the content of the attribute, which it writes to a DOM property. Therefore, this approach is virtually identical to the previous one. These two pieces of code work the same:

  1. HTML
<input type="button" onclick="alert('Click! ')" value="Button">Copy the code
  1. HTML + JS
<input type="button" id="button" value="Button"> <script> button.onclick = function() { alert('Click! '); }; </script>Copy the code

In the first example, button.onclick is initialized by an HTML attribute, while in the second example it is initialized by a script. That’s the only difference. Because there is only one onclick property, we cannot allocate any more event handlers. In the following example, we use JavaScript to add a handler that overrides an existing handler

<input type="button" id="elem" onclick="alert('Before')" value="Click me"> <script> elem.onclick = function() { // Overrides the existing handler alert('After'); }; </script>Copy the code

To remove a handler — assign elem. Onclick = null.