Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what mouse events are there in javascript". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Mouse events are: 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.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

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

A detailed description of the mouse event type is shown in the following table:

Mouse event type event type indicates that click occurs when the left mouse button is clicked, but not if the right mouse button is also pressed. This event is also triggered when the user's focus is on the button and the Enter key is pressed. This event occurs when dblclick double-clicks the left mouse button. If the right button is also pressed, it will not happen when the mousedown mouse button is pressed when the mouseout mouse pointer is over an element and is about to move out of the boundary of the element occurs when the mouseover mouse pointer moves out of one element to another element occurs when the mouseup mouse button is released mousemove mouse continues to occur over an element mouseleave is triggered when the mouse pointer is moved out of the element mouseenter is triggered when the mouse pointer moves over the element. Contextmenu is triggered when the user clicks the right mouse button to open the context menu

Example:

JS commonly used mouse event li {font-size: 18pxt lineline height: 35px;} li:hover {cursor:pointer;} Click me to change color! Double click for a surprise! The mouse over the font becomes larger, the mouse leaves the font becomes smaller! The mouse press the text is red, the mouse lift the text is green, the mouse moves to print "the mouse moved in the li." / / get the li tag var oLis = document.getElementsByTagName ("li"); / * Click the first li * / oLis [0] .onclick = function () {this.style.backgroundColor = 'red' } / * / / * double-click the second li * / oLis [1] .ondblclick = function () {this.style.color = 'red' } / * / * mouse over the third li * / oLis [2] .onMouseover = function () {this.style.fontSize = 22 + 'px' } / * the mouse leaves the third li * / oLis [2] .onmouseout = function () {this.style.fontSize = 18 + 'px' } / * / / * mouse down the fourth li * / oLis [3] .onmousedown = function () {this.style.color = 'red' } / * Mouse raises the fourth li * / oLis [3] .onmouseup = function () {this.style.color = 'blue';} / * Mouse moves over the fourth li * / oLis [3] .onmousemove = function () {console.log (' mouse moved in li.');}

This is the end of the content of "what are the mouse events in javascript"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.