• Keyboard events
  • Mouse events
  • “Event”

Keyboard events

The event timing
onkeydown Keyboard keys are pressed
keypress Keyboard keypress
keyup Release of keyboard keys

Listen for a keystroke event

document.onkeydown = function(event) {
    // Triggered when the keyboard is pressed
    console.log('key down');
};

document.onkeypress = function(event) {
    // Triggered when the keyboard is pressed
    console.log('key press');
};

document.onkeyup = function (event) {
    // Triggered when the keyboard is up
    console.log('key up');
};
Copy the code

Event Parameter This parameter is the KeyboardEvent event object, which contains keyword-related properties.

  • type: Event type
  • key: indicates what is being pressed on the keyboard that is the key value, ‘p’ when you press the letter ‘p’
  • code: represents the keyboard code. When the letter ‘p’ is pressed, the value is ‘KeyP’
  • keyCodeEach key has a unique key code. The key code of the letter ‘p’ is 80
  • altKey: Boolean value indicating whether the Alt key is also pressed
  • ctrKey: Boolean value, indicating whether the CTR key is also pressed
  • shiftKey: Boolean value indicating whether the shift key is also down
  • metaKey: Boolean value, Windows platform indicates whether the Window key is pressed simultaneously, MAC indicates whether the Command key is pressed simultaneously
  • repeat: Boolean value, true if a key has been pressed, indicating repetition

You can check these properties to determine which key the user is pressing, and whether keys such as CTRL and Alt are pressed simultaneously:

document.onkeydown = function(event) {
    // Keyboard press is triggered
	console.log('key down: ' + event.key);
	if (event.altKey) {
	    console.log('alt is active');
    }
	if (event.shiftKey) {
	    console.log('shift is active'); }};Copy the code

Mouse events

The event timing
onclick The event that is triggered when the mouse clicks on an object
ondblclick Event triggered when the mouse is double-clicked on an object
onmousedown The event that is triggered when the mouse button is pressed
onmousemove The event that is triggered when the mouse is moved
onmouseout An event that is triggered when the mouse moves away from the element or child that is listening for the event
onmouseover An event that is triggered when the mouse moves over an element or child that is listening for the event
onmouseup An event triggered when the mouse button is released

Example:

<script type="text/javascript">
    function appendText(str) {
        document.body.innerHTML += str + "<br/>";
     }
     document.onmousedown = function() {
         appendText("onmousedown");
         appendText("button = " + event.button);
         appendText("(x,y) = " + event.x + "," + event.y);
    }
    document.onmouseup = function() {
        appendText("onmouseup");
    }
    document.onclick = function() {
        appendText("onclick");
    }
    document.ondblclick = function() {
        appendText("ondblclick");
    }
    document.oncontextmenu = function() {
        appendText("oncontextmenu");
    }
    document.onmouseover = function() {
        appendText("onmouseover");
    }
    document.onmouseout = function() {
        appendText("onmouseout");
    }
    document.onmousemove = function() {
        appendText("mousemove");
    }
</script>
Copy the code

The argument is the MouseEvent object type, which contains the following useful properties:

  • type: Event type, such asmosemoveormousedown
  • button: integer, number of the button that is pressed when the mouse event is triggered
  • buttons: integer, number of the button that pops up when the mouse event is triggered
  • clientX: X coordinate of the mouse pointer in the DOM content area
  • clientY: Y coordinate of the mouse pointer in the DOM content area
  • offsetX: the X coordinate of the mouse pointer relative to the parent node to fill the edge
  • offsetY: Y coordinates of the mouse pointer relative to the parent node to fill the edge
  • screenX: The X coordinate of the mouse pointer on the global screen
  • screenY: Y coordinates of the mouse pointer on the global screen
  • pageX: the x-coordinate of the mouse pointer over the entire DOM content (including paging)
  • pageY: Y coordinates of the mouse pointer over the entire DOM content (including paging)
  • altKey: Boolean value indicating whether the Alt key is also pressed
  • ctrKey: Boolean value indicating whether the Alt key is also pressed
  • shiftKey: Boolean value indicating whether the shift key is also down
  • metaKey: Boolean value, Windows platform indicates whether the Window key is pressed simultaneously, MAC indicates whether the Command key is pressed simultaneously

Example: Right-click to pop up div

document.oncontextmenu = function(){
    return false
};     // Disable the right mouse button menu display

var res = document.getElementById('box');      // find the div with id box
document.body.onmouseup = function(e){     // Click in the body to trigger the event
    if(e.button===2) {// If button=1, button=2, button=0
        console.log(e);     // Print out the parameters passed in
        console.log(e.offsetY);     // Prints the Y coordinates of the mouse click
        console.log(e.offsetX);     // Prints the X-axis coordinates of the mouse click
        res.style.top = e.offsetY+'px';     // Position the Y axis for div when mouse click
        res.style.left = e.offsetX+'px';    // Position the X axis for div when mouse click
        res.style.display = 'block';        // Display div box
        }else{
            res.style.display = 'none';         // Otherwise, the div box is not displayed}}Copy the code

“Event”

Not all elements have focus events, only interactive elements, such as form elements, a tags. Only one element on a page can be focused, and one element is focused and the other is out of focus, which is document by default.

<form>
    <input type="text" name="txt1" id="txt" />
    <input type="button" name="btn" value="Click" />
</form>
Copy the code
form.txt1.focus();    // This method does not fire the onfocus () event.
form.txt1.onfocus=function(){
    console.log(1);
}  // This event is emitted when the element gets focus
form.txt1.onblur=function(){
    console.log(2); }// This event is emitted when the element loses focus
form.btn.onclick=function(){
    form.txt1.select(); 
}  // Select all the text in the input box
form.btn.onclick=function(){ 
    form.txt1.setSelectionRange(2.5); form.txt1.focus(); }SetSelectionRange (start, end) contains two parameters, one is start, the start position, the other is focus(), and the other is focus(). One is the end position.
Copy the code