Rumah > Artikel > hujung hadapan web > Apakah peristiwa tetikus dalam javascript

Apakah peristiwa tetikus dalam javascript

青灯夜游asal: 2021-11-24 18:01:2514806semak imbas

Acara tetikus termasuk: 1. acara klik (klik); 2. acara tetikus turun; Peristiwa mousemove;

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Dalam JavaScript, acara tetikus ialah jenis acara yang paling biasa digunakan dalam pembangunan web.

Butiran jenis acara tetikus ditunjukkan dalam jadual berikut:

鼠标事件类型
事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	鼠标按钮被按下时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	鼠标按键被松开时发生
mousemove	鼠标在某个元素上时持续发生
mouseleave	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发。
contextmenu	在用户点击鼠标右键打开上下文菜单时触发

Contoh:

<!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>

Apakah peristiwa tetikus dalam javascript

【 Disyorkan Berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Apakah peristiwa tetikus dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 指针事件鼠标事件

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah pengendali tugasan yang ada pada JavaScript?Artikel seterusnya：Apakah pengendali tugasan yang ada pada JavaScript?

Artikel berkaitan

Lihat lagi