What are the mouse events in javascript-Front-end Q&A-php.cn

What are the mouse events in javascript

青灯夜游

Release： 2021-11-24 18:01:25

Original

14866 people have browsed it

Mouse events include: 1. click (click) event; 2. dblclick (double-click) event; 3. mousedown event; 4. mouseup event; 5. mouseout event; 6. mouseover event; 7. mousemove Event; 8. mouseleave event, etc.

What are the mouse events in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In JavaScript, mouse events are the most commonly used event type in web development.

Mouse event type details are shown in the following table:

Mouse event type
Event type	Description
click	Occurs when the left mouse button is clicked, but does not occur if the right button is also pressed. When the user focuses on the button and presses the Enter key, this event will also be triggered
dblclick	Occurs when the left mouse button is double-clicked. If the right button is also pressed It will not happen
mousedown	Occurs when the mouse button is pressed
mouseout	mouse Occurs when the pointer is on an element and is about to move out of the element's bounds
mouseover	Occurs when the mouse pointer moves out of an element and onto another element
mouseup	Occurs when the mouse button is released
mousemove	Continuously occurs when the mouse is over an element
mouseleave	Fires when the mouse pointer moves out of the element
mouseenter	When the mouse pointer moves to Fires when the element is on.
contextmenu	Triggered when the user clicks the right mouse button to open the context menu

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS常用鼠标事件</title>
    <style>
        li{font-size: 18px;line-height: 35px;}
        li:hover{cursor:pointer;}
    </style>
</head>
<body>
    <ol>
        <li>单击我变色！</li>
        <li>双击有惊喜！</li>
        <li>鼠标滑过字体变大，鼠标离开字体变小！</li>
        <li>鼠标按下文字为红色，鼠标抬起文字为绿色，鼠标移动打印“鼠标在 li 中移动了...”！</li>
    </ol>
 
    <script>
        // 获取 li 标签
        var oLis = document.getElementsByTagName("li");
        /* 单击第一个 li */
        oLis[0].onclick = function () {
            this.style.backgroundColor = &#39;red&#39;;
        }
        /* ******************************************* */
        /* 双击第二个 li */
        oLis[1].ondblclick = function () {
            this.style.color = &#39;red&#39;;
        }
        /* ******************************************* */
        /* 鼠标滑过第三个 li */
        oLis[2].onmouseover = function () {
            this.style.fontSize = 22 + &#39;px&#39;;
        }
        /* 鼠标离开第三个 li */
        oLis[2].onmouseout = function () {
            this.style.fontSize = 18 + &#39;px&#39;;
        }
        /* ******************************************* */
        /* 鼠标按下第四个 li */
        oLis[3].onmousedown = function () {
            this.style.color = &#39;red&#39;;
        }
        /* 鼠标抬起第四个 li */
        oLis[3].onmouseup = function () {
            this.style.color = &#39;blue&#39;;
        }
        /* 鼠标在第四个 li 上移动 */
        oLis[3].onmousemove = function () {
            console.log(&#39;鼠标在 li 中移动了...&#39;);
        }
    </script>
</body>
</html>

Copy after login

What are the mouse events in javascript

【Related recommendations: javascript learning tutorial】

The above is the detailed content of What are the mouse events in javascript. For more information, please follow other related articles on the PHP Chinese website!