[JavaScript] common events (mouse, keyboard, form, etc.)

💻[JavaScript]Common Events 🏠Column: JavaScript
👀Personal homepage: star learning programming🍁
🧑Personal Profile: An ordinary person who keeps improving himself🚀
🔊Sharing direction: Currently focusing on the front end, other knowledge will be shared in stages🍀
👊Motto: ☀️ There is no impossible road, only those who dare not go! ☀️
👉Let's make progress together and become a better version of ourselves! ! ! 🎁

[JavaScript] common events (mouse, keyboard, form, etc.)

1. Common mouse events

mouse eventdescribe
onclickTriggered by left mouse click
ondblclickTriggered by double-clicking the left mouse button
oncontextmenuTriggered by right mouse click
onmouseovermouseover trigger
onmouseoutmouseout trigger
onmouseentermouseover event
onmouselemouse out event
onfocusget mouse focus trigger
onblurTriggered by losing mouse focus
onmousemoveTriggered by mouse movement
onmouseupmouse up trigger
onmousedownmouse down trigger

The difference between onmouseenter and onmouseleave and onmouseover and onmousemove:

  • onmouseover and onmouseout can still be triggered when the mouse moves over the child element
  • onmouseenter and onmouseleave will not trigger when the mouse moves into a child element

2. Common keyboard events

keyboard events

  • Keyboard events can be bound to all elements, not all elements can trigger keyboard events
  • Generally bind keyboard elements to window/document/form elements
  • Keyboard events do not consider Chinese
keyboard eventsdescribe
onkeydownkeyboard press event
onkeyupkeyboard up event
onkeypresskeyboard typing event

Note: the content pressed by the onkeypress event must be consistent with the content that appears

3. Common form events

form eventdescribe
onfocusformspace gets focus
onblurform loses focus
onchangeForm content changes
oninputform input event
onsubmitform submit event
onresetform reset event

be careful:

  1. onchange: It will be triggered when the text box requires to get the focus and lose the focus.
  2. oninput: Triggered whenever an input or delete is entered
  3. Both form submission and reset must be bound to the form field

4. Common touch events

touch eventdescribe
ontouchstartstart touching
ontouchmovetouch to move
ontouchendtouch end

5. Common drag events

drag eventdescribe
ondragstartstart dragging
ondragDrag and drop
ondragendend drag
ondragenterTriggered when the dragged element enters the range of the dragged and dropped element
ondragleaveTriggered when the dragged element leaves the scope of the dragged element
ondragoverTriggered when the dragged element completely enters the element range
ondragdropTriggered when the dragged element is released within the scope of the dragged element

Note: If you want the drop event to take effect, you need to prevent the default behavior of the dragover event

<!-----Dividing line----->
p.ondrop = function() {
    console.log("drag the element in and let go");

Case: drag and drop elements

analysis of idea:

    case drag
        1. When to trigger the effect
            1) mouse down
            2) mouse up
            3) mouse movement
        2. What range triggers the effect
            1) mouse down div
            2) mouse up div
            3) mouse move document
        3. what effect
            1) The mouse is pressed to ensure that the div can be dragged
            2) Raise the mouse to ensure that the div cannot be dragged
            3) mouse movement set div top left   
            Get the position of the cursor from the upper left corner of the window when moving - the initial position of the cursor from the upper left corner of the element
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
    // 0 get element
    var div = document.querySelector("div");
    // 0 ready variable
    var flag = false; // Default elements are not draggable
    var startX = 0;
    var startY = 0;
    // 1. Mouse down
    div.onmousedown = function (e) {
        // turn on the switch
        flag = true;
        // The position of the mouse from the upper left corner of the element at the beginning of the recording
        startX = e.offsetX;
        startY = e.offsetY;
    // 2. Mouse up
    div.onmouseup = function () {
        // switch off
        flag = false;
    // 3. Mouse movement
    document.onmousemove = function (e) {
        // Can't drag if the switch is off
        if (!flag) {
            // If the code enters here, it means that the switch is off, that is, the mouse is lifted and cannot be dragged
        // Indicates that it can be dragged
        console.log("can be dragged");
        // Set the top left of the div
        // Get the position of the cursor from the upper left corner of the window when moving - the initial position of the cursor from the upper left corner of the element
        var x = e.clientX - startX;
        var y = e.clientY - startY;
        div.style.top = y + "px";
        div.style.left = x + "px";



I hope it can help you a little bit, and welcome friends to correct me if I make any mistakes.
👍Like: Your appreciation is my motivation!
⭐Favorites: Your support is the source of my creation!
✍Comments: Your suggestions are good medicine for my improvement!
work hard together! ! ! 💪💪💪

Tags: Front-end Javascript programming language

Posted by JustLikeIcarus on Fri, 20 Jan 2023 21:12:29 +1030