Связанные показания:
JavaScript Event Superaint Support (v) Тип событий мыши в JS
//www.vevb.com/article/86259.htm
JavaScript Event Superaint Support (i) Поток событий
//www.vevb.com/article/86261.htm
JavaScript Event Learning Redugary (IV) Общественные члены событий (свойства и методы)
//www.vevb.com/article/86262.htm
JavaScript Event Superaint Support (II) Обработчик событий JS
//www.vevb.com/article/86264.htm
JavaScript Event Superaint Support (III) JS -объект события
Мышиные события
9 событий мыши определены в событии уровня DOM3.
Mousedown: запускается при нажатии кнопки мыши (слева или вправо).
Не может быть вызвана клавиатурой.
MouseUp: запускается при выпуске кнопки мыши и появляется.
Не может быть вызвана клавиатурой.
Нажмите: запускается при нажатии левой кнопки мыши или нажатия клавиши ENTER. Это важно для обеспечения доступности, что означает, что обработчик событий OnClick может быть выполнен как через клавиатуру, так и через мышь. dblclick: запускается, когда кнопка левой мыши дважды щелкнула. Mouseover: Переместите мышь на целевой элемент. Это будет стрелять, когда мышь перемещается по его потомкам. Mouseout: мышь удаляет вышеуказанный целевой элемент.
MouseEnter: мышь перемещается в диапазон элемента и запускает событие, которое не пузырится, то есть она не будет вызывать, когда мышь перемещается к своим элементам потомков.
MouseLeave: запускается, когда мышь выходит из диапазона элементов, а событие не пузырится, то есть она не будет вызвать, когда мышь перемещается к своим элементам потомков.
MouseMove: мышь постоянно запускается, когда она перемещается внутрь элемента.
Не может быть вызвана клавиатурой.
примечание:
События Mousedown и Mouseup последовательно запускаются на элементе, чтобы запустить событие Click. Событие DBLCLICK будет запускается только в том случае, если два события клики будут запущены один за другим.
Если один из Mousedown или MouseUp отменен, событие Click не будет запускается. Если событие Click отменяется прямо или косвенно, событие DBLCLICK не будет запускается.
1. Порядок запуска событий
Например: дважды щелкните кнопку и посмотрите на событие, вызванное выше.
<body> <input id = "btn" type = "кнопка" value = "click"/> <script> var btn = document.getElementById ("btn"); btn.addeventlistener ("mousedown", function (event) {console.log ("mousedown");}, false); btn.addeventlistener ("mouseup", function () {console.log ("mouseup");}, false); btn.addeventlistener ("click", function () {console.log ("click");}, false); btn.addeventlistener ("dblclick", function () {console.log ("dblclick");}, false); </script> </body>2. Разница между мышиной и мышиной
разница:
Мероприятие Mouseover будет пузыриться, что означает, что оно будет стрелять, когда мышь перейдет к своим потомкам.
Мероприятие мышиного захода не пузырится, что означает, что мышь не будет стрелять, когда она перейдет к своим потомкам.
Например:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #outer {position: Absolute; Ширина: 200px; Высота: 200px; Верх: 0; слева: 0; Внизу: 0; Справа: 0; Порность: Авто; фоновый цвет: розовый; } #inner {position: Absolute; Ширина: 100px; высота: 100px; Верх: 50%; Слева: 50%; Мяглевая маржа: -50PX; фоновый цвет: оранжевый; Текст-альбом: Центр; высота линии: 100px; } #Внешний, #Inner {Border-Radius: 50%; } </style> <script src = "jquery-2.1.1.min.js"> </script> </head> <body> <body> <div id = "uper"> <div id = "inner"> </div> </div> </body> <script> varementdiv = document.getelementebyid ("Outeer"); {console.log («Событие MouseOver родительского div запускается»);}, false); // parentdiv.addeventlistener ("mouseenter", function () {// console.log ("Событие MouseEnter parent Div -"); //}, falseDivout "(//}, failydivoutelestreler (//}; console.log («Событие Mouseout родительского div запускается»); //}, false); // parentdiv.addeventlistener ("mouseleave", function () {// console.log ("Событие MouseLeave of Mater Div запускается"); //}, false);примечание:
Mouseover соответствует мыши, мышиный, соответствующий мышке. Эффект может быть неуместен в приведенном выше коде.
API Hover в jQuery сочетает в себе мышь и мышцы для использования.
3. Кнопки мыши влево и правой
<script type = "text/javascript"> document.onmousedown = function (ev) {var oevent = ev || event; Alert (oevent.button); // Кнопка левой мыши в IE составляет 1, правая кнопка мыши составляет 2, а левая кнопка мыши в FF и правая кнопка мыши в Chrome - 0, правая кнопка мыши 2}; </script>4. Разница между Mouseover и MouseMove
Вообще говоря, MouseOver достаточно, но MouseMove используется только в особых обстоятельствах. MouseMove является более потребляющим ресурсы, такой как мониторинг изменений в координатах мыши.
Выше приведено резюме обучения JavaScript событий, введенное вам в соответствии с редактором (v), связанными с знаниями о событиях мыши типов событий в JS. Я надеюсь, что это будет полезно для всех!