One 、 event

Two 、 Flow of events

See :javaScript event ( One ) Flow of events

3、 ... and 、 Event handler

Four 、IE Event handler

See javaScript event ( Two ) Event handler

5、 ... and 、 Event object

See javaScript event ( 3、 ... and ) Event object

6、 ... and 、 Public members of event objects

See javaScript event ( Four )event Public members of ( Properties and methods )

7、 ... and 、 Mouse events

DOM3 Level event 9 Mouse events .

  • mousedown: Mouse button pressed ( Left or right ) Trigger when . Cannot be triggered by keyboard .
  • mouseup: Triggered when the mouse button is released . Cannot be triggered by keyboard .
  • click: Click the mouse left-click Or press enter to trigger . This is important to ensure accessibility , signify onclick Event handlers can be executed either by keyboard or by mouse .
  • dblclick: Double click the mouse left-click Trigger when .
  • mouseover: Move the mouse over the target element . Triggered when the mouse moves over its descendant element .
  • mouseout: Move the mouse over the target element .
  • mouseenter: The mouse moves into the range of elements to trigger , The incident is not bubbling , That is, when the mouse moves over its descendant element, it will not trigger .
  • mouseleave: Triggered when the mouse moves out of the range of elements , The incident is not bubbling , That is, when the mouse moves to its descendant element, it will not trigger .
  • mousemove: When the mouse moves inside the element, it triggers continuously . Cannot be triggered by keyboard .

note:

Trigger one after another on an element mousedown and mouseup event , Will trigger click event . two click Events trigger one after another dblclick event .

If you cancel 了 mousedown or mouseup One of them ,click Events will not be triggered . Cancel directly or indirectly click event ,dblclick Events will not be triggered .

1、 The order in which events are triggered

give an example : By double clicking the button , Take a look at the events triggered above .

<body>
<input id="btn" type="button" 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、mouseenter and mouseover The difference between

difference :

mouseover Events will bubble , It means , Triggered when the mouse moves over its descendant element .

mouseenter Events don't bubble , It means , The mouse over its descendant element does not trigger .

give an example :

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#outer{
position: absolute;
width: 200px;
height: 200px;
top:0;
left: 0;
bottom:0;
right: 0;
margin: auto;
background-color: pink;
}
#inner{
position: absolute;
width: 100px;
height:100px;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;;
background-color: orange;
text-align: center;
line-height: 100px;
}
#outer,#inner{
border-radius:50%;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
<script>
var parentDiv=document.getElementById("outer");
parentDiv.addEventListener("mouseover", function () {
console.log(" Father div Of mouseover Event is triggered ");
},false); //parentDiv.addEventListener("mouseenter", function () {
// console.log(" Father div Of mouseenter Event is triggered ");
//},false);
//parentDiv.addEventListener("mouseout", function () {
// console.log(" Father div Of mouseout Event is triggered ");
//},false);
//parentDiv.addEventListener("mouseleave", function () {
// console.log(" Father div Of mouseleave Event is triggered ");
//},false);
</script>
</body>
</html>

note:

mouseover Corresponding mouseout,mouseenter Corresponding mouseleave. The effect can be seen by uncommenting the code above .

jquery in hover API It's a mouseenter and mouseleave Put them together .

3、 Left and right mouse buttons

<script type="text/javascript">
document.onmousedown=function (ev)
{
var oEvent=ev||event; //IE Browser directly use event perhaps window.event Get the event itself .
alert(oEvent.button);// IE Under the mouse The left button is 1 , Right click is 2 ff and chrome Next The left mouse button is 0 Right click is 2
};
</script>

4、mouseover and mousemove The difference between

In general mouseover that will do , Only in special circumstances mousemove,mousemove More resources , For example, we need to monitor the changes of mouse coordinates .

To be continued ...

The author of this article starof, Because knowledge itself is changing , The author is also learning and growing , The content of the article is also updated from time to time , To avoid misleading readers , Easy to trace , Please reprint and indicate the source :http://www.cnblogs.com/starof/p/4106904.html If you have any questions, please discuss with me , Common progress .

javaScript event ( 5、 ... and ) More articles on mouse events of event type

  1. DuiLib Event analysis ( One )—— Mouse event response

    I've been working on it recently DuiLib Custom list row element events in , Because the treatment scheme can not get better effect , So we have to peel off layer by layer DuiLib How did the incident come about , See if you can intercept messages at a certain level , Rewrite yourself . I'm going to use CListContaine ...

  2. Delphi ComboBox Properties and events of 、 And the trigger of several mouse events

    I did two small test programs temporarily , To get to the bottom of it combobox Of OnClick.OnChange.OnDropDown.OnCloseUp.OnSelect The trigger and sequence of events . In addition, the trigger of common mouse events is attached ...

  3. Talking about Qt The routing mechanism of events : Mouse events

    Please note that , This article is a discussion article, not a tutorial , It's based on experiments and analysis , It could be wrong , So welcome others to discuss and correct . These days for Qt I'm more curious about , It's not often used , It's usually a signal , Handling of events , Generally, the response key is needed ...

  4. javascript introduction And ztree ( 8、 ... and A series of mouse events )

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  5. dispatchEvent Custom trigger events , It is often used to customize mouse events or click events

    The triggering of custom events is inevitable , Due to browser compatibility issues , We're going to talk about it separately , For standard browsers and IE6/7 And so on . 1. For standard browsers , It provides methods for elements to trigger :element.dispatchEve ...

  6. javaScript event ( 6、 ... and ) Events of event type

    The wheel event is actually a mousewheel event , This event tracks the mouse wheel , similar Mac Touch screen version of . One . Customer area coordinate location Mouse events occur at specific locations in the browser's view . This location information is stored in the clientX and c ...

  7. javaScript event ( 8、 ... and ) The change of event type

    DOM2 Changes in grade (mutation) Events can be DOM Prompt when a part of the message changes . The change event is XML or HTML DOM The design of the , Not specific to a language .DOM2 Level defines the following change events . DOMSubtreeMod ...

  8. In depth understanding of DOM Event type series 1 —— Mouse events

    × Catalog [1] type [2] The order [3] coordinates [4] Modification key [5] Related elements [6] Mouse button [7] Wheel event [8] Mobile devices In front of the word Mouse events are web The most common type of events in development , After all, mouse is the most important positioning device . this paper ...

  9. 【javascript/css】 About mouse events onmousexxx and css pseudo-classes hover

    When using the mouse to move in and out of events , There are generally two ways , One is DOM The event "onmouseover" and "onmouseout", The other is css Pseudo class of ":hover ...

Random recommendation

  1. idea Make the font smoother

    Personal use myeclipse Accustomed to the , to idea I think I'm square and rigid . And then changed the font , If you like, you can try . Click on file --> setting.. --> Change the editor's font to ...

  2. Use Netease ubuntu Image acceleration package installation

    use vi Tools to edit files sudo vi /etc/apt/sources.list With trusty(14.04) For example , Insert the following to the front of the file : deb http://mirrors.163.com/u ...

  3. cocosbuilder Medium Callbacks and sound effects

    cocosbuilder3 There is an increase in Callback and sound effects Of timeline This thing is used to control the sound effect and callback action during the animation playing , Very convenient Hold down option key (alt), Click on t ...

  4. [JIT_APP]Activity Life cycle related 7 A way

    First send an official Android document Activity Life cycle diagram Here's a look at this 7 A brief introduction to the related methods in the life cycle OnCreate() When Activity When created , The method runs automatically . This method does some initialization ...

  5. eclipse To configure Tomcat Problems encountered and Solutions

    Eclipse It's a development JSP It's a great tool , And I'm configuring Tomcat There are some small problems with the server , Here I would like to sum up some experience for you , Hope to help colleagues who also encounter these problems to solve these problems easily ~ The author is taking ...

  6. Use Angular CLI Generate code from the blueprint

    The first article is : " Use angular cli Generate angular5 project " : http://www.cnblogs.com/cgzl/p/8594571.html This article is mainly about students ...

  7. B20J_4027_[HEOI2015] Rabbit and Cherry Blossom _ Tree form DP

    B20J_4027_[HEOI2015] Rabbit and Cherry Blossom _ Tree form DP The question : A long time ago , A group of rabbits live in the forest . one day , The rabbits suddenly decided to see the cherry blossom . The cherry trees in the forest where the rabbits live are very special . Cherry trees are made up of n It's made up of two branches , Ed ...

  8. After the brand computer hard disk is damaged , Use MediaCreationTool Download the original from Microsoft Windows To USB Make the installation disk

    Recently, the hard disk of one of my desktop computers was damaged . At first, it's slowing down , And then it was too slow , Sometimes there is no response for half a day . see Windows event , Found to have id by 7 Disk error of . Use Windows 8.1 Home version from ...

  9. Fully understand Javascript Closure and closure of several writing methods and uses 【 turn 】

    One . What is closure and how to write and use it 1. What is a closure Closure , The official explanation for closures is : An expression that has many variables and the environment to which they are bound ( Usually a function ), So these variables are also part of the expression . Characteristics of closures : 1. ...

  10. XAMPP+composer+laravel+thinkphp5 Those affectionate memories

    xampp Dependency Library https://www.microsoft.com/zh-CN/download/details.aspx?id=29 Download address https://www.apachefriends ...