This is the 30th day of my participation in the Wenwen Challenge

4. (see events

The DOM3 Events specification adds an event called textInput, which fires when a character is entered into an editable area. There are two differences between textInput and KeyPress:

  1. Keypress fires on any element that can get focus, while textInput fires only on editable areas.
  2. TextInput fires only when a new character is inserted, and keypress fires on any imaged text (including the backspace key).

The Event object for textInput provides a data property that contains the character to be inserted. The usage method is as follows:

let textbox = document.getElementById("myText");
textbox.addEventListener("textInput".(event) = > {
  console.log(event.data);
});
Copy the code

The Event object also has a property called inputMethod, which represents the means by which text is entered into the control. Possible values are as follows:

  1. Indicates that the browser is not sure what the input method is.
  2. Represents the keyboard;
  3. Paste;
  4. Represents drag and drop operation;
  5. Said the IME.
  6. Represents form options;
  7. Handwriting;
  8. Presentation speech;
  9. Represents the combination mode;
  10. Represents the script;

You can use the above values to determine how the user entered the value.

Synthetic events

Synthetic Events are new to DOM3 Events to handle complex Input sequences that typically use Input Method Editors (IME). The IME allows the user to type characters that are not available on the physical keyboard. Our Chinese language, for example, is generated through many character combinations, known as compositing events.

There are three types of composite events:

  • compositionstartIn:IMETriggered when the text composition system of the
  • compositionupdate: Triggered when a new character is inserted into an input field
  • compositionendIn:IMETriggered when the text synthesis system is shut down, indicating the resumption of normal keyboard input

The event of the synthesized event adds a new data property that contains the following values for each of the 3 cases:

  • incompositionstartContains text that is being edited (for example, text has been selected but not replaced);
  • incompositionupdateEvent containing the new character to be inserted;
  • incompositionendContains all the content entered during this composition.

Synthetic use is as follows:

let textbox = document.getElementById("myText");
textbox.addEventListener("compositionstart".(event) = > {
  console.log(event.data);
});
textbox.addEventListener("compositionupdate".(event) = > {
  console.log(event.data);
});
textbox.addEventListener("compositionend".(event) = > {
  console.log(event.data);
});
Copy the code

HTML 5 events

HTML5 is an exhaustive list of all the events that browsers support. The following describes events that are well supported by browsers, but not all browsers.

  1. Contextmenu event

Contextmenu event specifically used to indicate when the contextmenu should be displayed, allowing developers to cancel the default contextmenu and provide custom menus. The ContextMenu event bubbles, so you can handle all of the same events on the page simply by specifying an event handler for the document. The ContextMenu event is supposed to be a mouse event, so many properties on the Event object are related to cursor position. Consider the following example:

<! DOCTYPEhtml>
<html>
  <head>
    <title>ContextMenu Event Example</title>
  </head>
  <body>
    <div id="myDiv">
      Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.
    </div>
    <ul
      id="myMenu"
      style="position: absolute; visibility: hidden; background-color: silver"
    >
      <li><a href="http://www.somewhere.com"> somewhere</a></li>
      <li><a href="http://www.wrox.com">Wrox site</a></li>
      <li><a href="http://www.somewhere-else.com">somewhere-else</a></li>
    </ul>
    <script>
      window.addEventListener("load".(event) = > {
        let div = document.getElementById("myDiv");
        div.addEventListener("contextmenu".(event) = > {
          event.preventDefault(); // Block display of the default menu
          // Display a custom menu
          let menu = document.getElementById("myMenu");
          menu.style.left = event.clientX + "px";
          menu.style.top = event.clientY + "px";
          menu.style.visibility = "visible";
        });
        document.addEventListener("click".(event) = > {
          document.getElementById("myMenu").style.visibility = "hidden";
        });
      });
    </script>
  </body>
</html>
Copy the code

reference

[1] JavaScript Advanced Programming (4th edition)