Home > Developer > Web Develop
We usually call the HTML DOM event object an event
Event-driven models
Event Source: (the element that triggered the event) the event source object refers to the events object
It encapsulates detailed information related to the event.
Objects that can only be accessed inside the event function when an event occurs
Automatic destruction after processing function is finished
Event Flow: When a page element triggers an event,
The element's container and the entire page will respond in a specific order to the triggering event of the element.
The order of event propagation is called the event stream.
Event Categories: mouse events, keyboard events, form events, page events
Here I mainly enumerate the mouse events:
1. Mouse events:
var btnnum = Event.button;
if (btnnum==2)
{
Alert ("You clicked the right mouse button! ")
}
else if (btnnum==0)
{
Alert ("You clicked the left mouse button! ")
}
else if (btnnum==1)
{
Alert ("You clicked the middle mouse button! ");
}
Else
{
Alert ("You clicked the" + btnnum+ "key, I'm not sure of its name.) ");
}
}
<body onmousedown= "Whichbutton (event)" >
<p> Click the mouse in the document. A message box will indicate which mouse button you clicked. </p>
Mouse events are mainly used in the following types:
Relative to the browser location
Event.clientx: Returns the horizontal coordinates of the mouse pointer to the browser page when the event is triggered
Event.clienty: Returns the vertical coordinates of the mouse pointer to the browser page when the event is triggered
Relative to screen position
Event.screenx: Returns the horizontal coordinates of the mouse pointer relative to the screen when the event occurs
Event.screeny: Returns the vertical coordinates of the mouse pointer relative to the screen when the event occurs
Relative to the event source location
EVENT.OFFSETX: Returns the horizontal coordinates of the mouse pointer relative to the event source when the event occurs
Event.offsety: Returns the vertical coordinates of the mouse pointer relative to the event source when the event occurs
Event.layerx: Returns the horizontal coordinates of the mouse pointer relative to the event source when the event occurs (FIREFOX)
Event.layery: Returns the vertical coordinates of the mouse pointer relative to the event source when the event occurs (FIREFOX)
onblur Element loses focus
OnClick an event handle that is invoked when a user taps an object
OnDblClick an event handle that is called when a user double-clicks an object
onfocus Element gets focus
OnMouseDown the mouse button is pressed
OnMouseMove Mouse is moved
onMouseOut mouse away from an element
onmouseover mouse moves over an element
OnMouseUp mouse button is released
OnReset reset button is clicked
2. Keyboard events:
This event is not required to be mastered, know on the line;
Altkey returns whether "ALT" is pressed when the event is triggered.
The button returns which mouse button is clicked when the event is triggered.
Classification of event streams:
Classification of *5.1 event streams
Bubbling events (event bubbling)
Supported by all browsers, the explicit event source to the most uncertain event source is triggered in turn.
Use the following code:
Element.addeventlistener (event, function, true); Capture type
Capture-type events (event capturing)
(ie does not support) an indeterminate event source to an explicit event source in turn to trigger down.
Use the following code:
Element.addeventlistener (event, function, false); bubble type
Example: Display coordinates when mouse is moved in (x, y)
First you need an empty div id= "box"
#box {
width:200px;
height:200px;
Background-color: #6ec0ff;
} set width height, background color
Then use JS to add the following code can be implemented
When your mouse moves inside the box
The six values are displayed in a constant change.
Box.onmousemove=function (e) {
var en=e| | window.event;
Box.innerhtml= "Horizontal" +en.clientx
+ "<br>y coordinates viewable area" +en.clienty
+ "<br> screen horizontal coordinates" +en.screenx
+ "<br> screen vertical coordinates" +en.screeny
+ "<br> Horizontal offset" +en.offsetx
+ "<br> Vertical offset" +en.offsety
}
HTML DOM Event Object
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
