JavaScript Advanced Programming---event object two

Types of mouse event events

Mouse events refer to mouse-related events, mainly with the following.

(1) Click event

The Click event is triggered when the user clicks the mouse (or presses the ENTER key) on the element node, document node, window object. "Mouse click" is defined as the user completes a MouseDown action and MouseUp action in the same position. Their order of triggering is: MouseDown first trigger, MouseUp then trigger, click Last trigger.

The following is an example of setting the Click event Listener function.

Div.addeventlistener ("click", Function (event) {  //display on the node, number of consecutive mouse clicks  Event.target.innerHTML = "click Count:" + Event.detail;}, False);

The following code is an example of a CSRF attack using the Click event (Cross-site request forgery).

<a href= "http://www.harmless.com/" onclick= "  var f = document.createelement (' form ');  F.style.display = ' None ';  This.parentNode.appendChild (f);  F.method = ' POST ';  f.action = ' Http://www.example.com/account/destroy ';  F.submit ();  return false; " > Fake Links </a>

　　

(2) DblClick Event

The DblClick event is triggered when the user double-clicks on the element, document, Window object. The event is triggered after MouseDown, MouseUp, and click.

(3) MouseUp events, MouseDown events

The MouseUp event is triggered when a pressed mouse button is released.

The MouseDown event is triggered when the mouse button is pressed.

(4) MouseMove event

The MouseMove event is triggered when the mouse moves inside a node. The event is triggered continuously when the mouse is continuously moving. To avoid performance problems, it is recommended that the listener function of the event be qualified, for example, to run the code only once for a certain period of time.

(5) MouseOver events, MouseEnter events

The MouseOver event and the MouseEnter event are triggered when the mouse enters a node.

The difference between the two is that the MouseOver event will bubble and the MouseEnter event will not. The MouseOver event of the child node bubbles to the parent node, which in turn triggers the parent node's MouseOver event. The MouseEnter event does not have this effect, so when you enter a child node, the parent node's listener function is not triggered.

The following example is the difference between the MouseEnter event and the MouseOver event.

HTML code for//<ul id= "test" >//   <li>item 1</li>//<li>item 2</li>//   <li >item 3</li>//</ul>var test = document.getElementById ("test");//After entering the test node, The event only fires once Test.addeventlistener ("MouseEnter", function (event) {  Event.target.style.color = "Purple";  SetTimeout (function () {    event.target.style.color = "";  }, and ()}, false);//After accessing the test node, simply move on the child element node, This event triggers multiple Test.addeventlistener ("MouseOver", function (event) {  Event.target.style.color = "Orange";  SetTimeout (function () {    event.target.style.color = "";  }, +);}, False);

　　

(6) Mouseout events, MouseLeave events

Both the Mouseout event and the MouseLeave event are triggered when the mouse leaves a node.

The difference between the two is that the Mouseout event will bubble and the MouseLeave event will not. The Mouseout event of the child node bubbles to the parent node, which in turn triggers the parent node's Mouseout event. The MouseLeave event does not have this effect, so when you leave a child node, the parent node's listener function is not triggered.

(7) ContextMenu

The ContextMenu event is triggered when the right mouse button is clicked on a node, or when the context menu key is pressed.

MouseEvent Object

Mouse events are represented by the MouseEvent object, which inherits the Uievent object and the event object. The browser provides a mouseevent constructor for creating a new MouseEvent instance.

event = new MouseEvent (Typearg, mouseeventinit);

The first parameter of the MouseEvent constructor is the event name (possible values include click, MouseDown, MouseUp, MouseOver, MouseMove, Mouseout), and the second argument is an event initialization object. The object can configure the following properties.

• ScreenX, sets the horizontal coordinates of the mouse relative to the screen (but does not move the mouse), the default is 0, which is equivalent to the Mouseevent.screenx property.
• ScreenY, sets the vertical coordinate of the mouse relative to the screen, which defaults to 0, equivalent to the Mouseevent.screeny property.
• ClientX, sets the horizontal coordinates of the mouse relative to the window, which defaults to 0, equivalent to the Mouseevent.clientx property.
• ClientY, sets the vertical coordinate of the mouse relative to the window, which defaults to 0, which is equivalent to the Mouseevent.clienty property.
• Ctrlkey, sets whether the CTRL key is pressed, the default is False, and is equivalent to the Mouseevent.ctrlkey property.
• Shiftkey, sets whether to hold down the SHIFT key, the default is False, the equivalent of the Mouseevent.shiftkey property.
• Altkey, sets whether the ALT key is pressed, the default is False, and is equivalent to the Mouseevent.altkey property.
• Metakey, sets whether to press the META key and defaults to false, equivalent to the Mouseevent.metakey property.
• button to set which mouse button is pressed, the default is 0. 1 means no key, 0 means pressing the primary key (usually the left button), 1 means pressing the secondary key (usually the middle key), and 2 means pressing the secondary key (usually the right key).
• buttons, sets which keys are pressed, is a binary value of 3 bits, and defaults to 0. 1 means pressing the primary key (usually the left button), 2 means pressing the secondary key (usually the right key), and 4 means pressing the secondary key (usually the middle key).
• Relatedtarget, sets an element node that, when MouseEnter and MouseOver events, represents the element node that the mouse has just left, in the case of mouseout and MouseLeave events, Represents the element node that the mouse is entering. The default is null, which is equivalent to the Mouseevent.relatedtarget property.

The following properties are also configurable, both inherited from the Uievent constructor and the event constructor.

• Bubbles, a Boolean value that sets whether the event bubbles, defaults to false, and is equivalent to the Event.bubbles property.
• Cancelable, a Boolean value that sets whether the event can be canceled by default to False, equivalent to the Event.cancelable property.
• View, which sets the views of the event, typically window or Document.defaultview, is equivalent to the Event.view property.
• Detail, set the number of mouse clicks, equivalent to the Event.detail property.

Here is an example.

function Simulateclick () {  var event = new MouseEvent (' click ', {    ' Bubbles ': true,    ' cancelable ': true  }) ;  var cb = document.getElementById (' checkbox ');  Cb.dispatchevent (event);}

The above code generates a mouse click event and triggers the event.

The properties of the MouseEvent instance are described below.

Altkey,ctrlkey,metakey,shiftkey

The following property returns a Boolean value that indicates whether a key is pressed when a mouse event occurs.

• Altkey Properties: Alt key
• Ctrlkey Properties: Key
• Metakey Properties: Meta key (Mac keyboard is a four-petal floret, Windows Keyboard is the Windows key)
• Shiftkey Property: Shift key

HTML code for//<body onclick= "Showkey (event);" >function ShowKey (e) {  console.log ("ALT key pressed:" + e.altkey);  Console.log ("CTRL key pressed:" + e.ctrlkey);  Console.log ("META key pressed:" + e.metakey);  Console.log ("META key pressed:" + E.shiftkey);}

In the above code, clicking on the page will output whether the ALT key is pressed at the same time.

Button,buttons

The following properties return the mouse key information for the event.

(1) button

The Button property returns a numeric value that indicates which mouse button was pressed.

-1: The key is not pressed. 0: Press the primary key (usually the left button). 1: Press the secondary key (usually the middle button or the wheel key). 2: Press the next key (usually the right button).

　　

HTML code for//<button onmouseup= "Whichbutton (event);" > click </button>var whichbutton = function (e) {  switch (e.button) {case    0:      console.log (' left button Clicked. ');      break;    Case 1:      console.log (' middle button clicked. ');      break;    Case 2:      console.log (' right button clicked. ');      break;    Default:      console.log (' Unexpected code: ' + E.button);}  }

　　

(2) buttons

The Buttons property returns a 3-bit value that indicates which keys are pressed at the same time. It is used to handle situations where multiple mouse keys are pressed simultaneously.

• 1: Binary is 001, which means pressing the left button.
• 2: Binary is 010, which means press right button.
• 4: Binary is 100, which means pressing the middle or wheel key.

When you press multiple keys at the same time, the bits corresponding to each pressed key will have a value. For example, pressing the left and right buttons at the same time returns 3 (binary 011).

Clientx,clienty,movementx,movementy,screenx,screeny

The subordinate sex and the position of the event are related.

(1) Clientx,clienty

The Clientx property returns the horizontal coordinates of the mouse position relative to the upper-left corner of the browser window, in pixels, regardless of whether the page is scrolled horizontally.

The Clienty property returns the vertical coordinate of the mouse position relative to the upper-left corner of the browser window, in pixels, regardless of whether the page is scrolled vertically.

The HTML code is//<body onmousedown= "Showcoords (event)" >function showcoords (evt) {  console.log (    "ClientX Value: "+ evt.clientx +" \ n "+"    ClientY value: "+ evt.clienty +" \ n "  );}

(2) Movementx,movementy

The Movementx property returns a horizontal offset in pixels that represents the horizontal distance between the current position and the previous MouseMove event. On a numeric value, equals Currentevent.movementx = Currentevent.screenx-previousevent.screenx.

The Movementy property returns a vertical offset, in pixels, that represents the vertical distance between the current position and the previous MouseMove event. On a numeric value, equals Currentevent.movementy = Currentevent.screeny-previousevent.screeny.

(3) Screenx,screeny

The Screenx property returns the horizontal coordinates of the mouse position relative to the upper-left corner of the screen, in pixels.

The Screeny property returns the vertical coordinate of the mouse position relative to the upper-left corner of the screen, in pixels.

The HTML code is//<body onmousedown= "Showcoords (event)" >function showcoords (evt) {  console.log (    "ScreenX Value: "+ Evt.screenx +" \ n "    +" ScreenY value: "+ Evt.screeny +" \ n "  );}

　

Relatedtarget

The Relatedtarget property returns the secondary related node of the event. For events with no secondary related nodes, the property returns NULL.

The following table lists the target properties and Relatedtarget property meanings for different events.

event name	target Property	relatedtarget properties
focusin	node receiving focus	node with loss of focus
focusout< /td>	node with loss of focus	node that receives focus
mouseenter	The node that will be entered	will leave Node
mouseleave	node to leave	node to enter
Mouseo UT	node to be left	node to be entered
mouseover	The node to be entered	will be away from Node
dragenter	The node to be entered	node to leave
drage XIT	node to be left	node to enter

HTML code for//<div id= "outer" style= "height:50px;width:50px;border-width:1px solid black;" >//   <div id= "inner" style= "height:25px;width:25px;border:1px solid black;" ></div>//</div>var inner = document.getElementById ("inner"); Inner.addeventlistener ("MouseOver", function () {  console.log (' Enter ' + event.target.id + "leave" + Event.relatedTarget.id);}); Inner.addeventlistener ("MouseEnter", function () {  console.log (' Enter ' + event.target.id + "Leave" + event.relatedTarget.id);}); Inner.addeventlistener ("Mouseout", function () {  console.log (' leave ' + event.target.id + "enter" + event.relatedTarget.id );}); Inner.addeventlistener ("MouseLeave", function () {  console.log (' leave ' + event.target.id + "enter" + event.relatedTarget.id);}); /mouse from outer into inner, output//Enter inner leave outer//enter inner leave outer//mouse from inner to outer, output//leave inner Enter outer//leave inner enter outer

　　

Wheel Events

The wheel event is an event related to the mouse wheel and currently has only one wheel event. The user scrolls the mouse wheel and triggers the event.

In addition to inheriting the properties of MouseEvent, Uievent, and event, there are several properties of the event.

DeltaX: Returns a numeric value that represents the horizontal scrolling amount of the wheel. DeltaY: Returns a numeric value that represents the vertical scrolling amount of the wheel. Deltaz: Returns a numeric value that represents the z-axis scrolling amount of the wheel. Deltamode: Returns a numeric value that represents the unit of scrolling, applicable to the above three properties. 0 represents pixels, 1 for rows, and 2 for pages.

　　The browser provides a wheelevent constructor that can be used to generate an instance of a wheel event. It takes two parameters, the first is the event name, and the second is the configuration object.

var syntheticevent = new Wheelevent ("Syntheticwheel", {"DeltaX": 4, "Deltamode": 0});

　

Keyboard events

Keyboard events are used to describe keyboard behavior, mainly KeyDown, KeyPress, KeyUp three events.

KeyDown: This event is triggered when the keyboard is pressed.

KeyPress: The KeyPress event is triggered as long as the key that is pressed is not CTRL, ALT, SHIFT, and meta.

KeyUp: This event is triggered when the keyboard is released.

HTML code for//<input type= "text"//   Name= "myinput"//   onkeypress= "return numbersonly (this, event);"   onpaste= "return false;" />function numbersonly (Otocheckfield, okeyevent) {  return Okeyevent.charcode = = 0    | |/\d/.test ( String.fromCharCode (Okeyevent.charcode));}

　　If the user keeps pressing the key and does not release, the keyboard event is triggered continuously, the order of triggering is as follows.

KeyDown

KeyPress

KeyDown

KeyPress

(Repeat the process above)

KeyUp

The following is an introduction to the properties of KeyboardEvent instances.

Altkey,ctrlkey,metakey,shiftkey

The following property returns a Boolean value that indicates whether the corresponding key is pressed.

• Altkey:alt Key
• Ctrlkey:ctrl Key
• Metakey:meta Key (Mac system is a four-petal floret, Windows system is the Windows key)
• Shiftkey:shift Key

function Showchar (e) {  console.log ("ALT:" + e.altkey);  Console.log ("CTRL:" + e.ctrlkey);  Console.log ("Meta:" + e.metakey);  Console.log ("Meta:" + E.shiftkey);}

　　

Key,charcode

The key property returns a String that represents the key name that was pressed. If you press the next control key and a symbol key at the same time, the key name of the symbol key is returned. For example, press CTRL + A to return a. If the key name is not recognized, the string unidentified is returned.

Key names for key function keys (different browsers may vary): Backspace,tab,enter,shift,control,alt,capslock,capslock,esc,spacebar,pageup,pagedown,end , Home,left,right,up,down,printscreen,insert,del,win,f1~f12,numlock,scroll and so on.

The CharCode property returns a numeric value that represents the Unicode value of the KeyPress event key, and the KeyDown and KeyUp events do not provide this property. Note that this property has been removed from the standard, although it is supported by the browser, but should not be used as much as possible.

JavaScript Advanced Programming---event object two