JavaScript event types (keyboard event, mouse event, focus event)

• Keyboard events
• Mouse events
• “Event”

Keyboard events

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

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