"Learning Notes" JS events and Events bubbling

JS Event Explanation

General Events
This event is triggered when the onclick mouse clicks
OnDblClick This event when the mouse double-clicks
OnMouseDown triggers this event when the mouse is pressed
OnMouseUp triggers this event when the mouse is released when the mouse is pressed
onMouseOver This event is triggered when the mouse moves over the range of an object
OnMouseMove triggers this event when the mouse moves
onMouseOut This event is triggered when the mouse leaves an object range
OnKeyPress This event is triggered when a key on the keyboard is pressed and released.
OnKeyDown This event is triggered when a key on the keyboard is pressed
OnKeyUp triggers this event when a key on the keyboard is pressed to release

Page-related events
Onabort images are interrupted by the user when downloading
onBeforeUnload This event is triggered when the contents of the current page are about to be changed
OnError triggers this event when an error occurs
This event is triggered when the onload page content finishes
This event is triggered when the window of the OnMove browser is moved
OnResize This event is triggered when the browser's window size is changed
This event is triggered when the scroll bar position of the Onscroll browser is changed
This event is triggered when the stop button of the OnStop browser is pressed or the file being downloaded is interrupted
OnUnload This event is triggered when the current page is changed

Form-related events
Onblur This event is triggered when the current element loses focus
OnChange the current element loses focus and the element's content changes to trigger this event
Onfocus This event is triggered when an element receives focus
OnReset This event is triggered when the properties of reset in the form are fired
OnSubmit trigger This event when a form is submitted

Scrolling caption Events
Onbounce This event is triggered when the content within the marquee is moved outside the marquee display range
OnFinish This event is triggered when the MARQUEE element finishes what needs to be displayed
OnStart This event is triggered when the marquee element starts displaying content

Edit Event
Onbeforecopy This event is triggered before the current selection of the page will be copied to the Clipboard of the viewer system
Onbeforecut This event is triggered when part or all of the content in the page is moved away from the current page [clip] and moved to the viewer's system Clipboard
Onbeforeeditfocus current element will enter edit state
This event is triggered when the onbeforepaste content is going to be transferred from the viewer's system Clipboard [paste] to the page
Onbeforeupdate notifies the target object when the viewer pastes the contents of the system Clipboard
OnContextMenu event triggered when a viewer presses the right mouse button to a menu or triggers a page menu with a keyboard key
Oncopy triggers this event when the current selected content of the page is copied
Oncut This event is triggered when the current selection of the page is clipped
Ondrag This event is triggered when an object is dragged [active event]
Ondragdrop an external object is dragged into the current window or frame by the mouse
Ondragend This event is triggered when the mouse drag is finished, that is, the mouse button is released
OnDragEnter This event is triggered when an object that is dragged by the mouse enters its container range
OnDragLeave This event is triggered when an object is dragged out of its container by the mouse object
OnDragOver This event is triggered when a dragged object is dragged within the scope of another object container
Ondragstart This event is triggered when an object is being dragged
OnDrop triggers this event when the mouse button is released during a drag
Onlosecapture This event is triggered when the element loses the selection focus formed by the mouse movement
Onpaste This event is triggered when content is pasted
Onselect Event when text content is selected
Onselectstart events that are triggered when text content selection will begin to occur

Data binding
Onafterupdate This event is triggered when data is completed by the data source to the object's transfer
Oncellchange when the data source is changed
OnDataAvailable triggering an event when data reception is complete
ondatasetchanged events triggered when the data source changes
Ondatasetcomplete This event is triggered when all valid data for a child data source has been read
onerrorupdate instead of onafterupdate event when data transfer is canceled with onbeforeupdate event triggering
Onrowenter events that are triggered when data from the current data source changes and there are new valid data
Onrowexit events that are triggered when the data of the current data source is going to change
Onrowsdelete This event is triggered when the current data record is deleted
Onrowsinserted This event is triggered when the current data source will be inserting a new data record

External events
Onafterprint triggers this event when a document is printed
Onbeforeprint This event is triggered when a document is about to be printed
Onfilterchange events that are triggered when the filter effect of an object changes
OnHelp This event is triggered when the viewer presses F1 or the browser's help selection
Onpropertychange This event is triggered when one of the properties of an object has changed
onReadyStateChange This event is triggered when the object's initialization property value has changed

==================================================
Oncontextmenu= ' return False '
Ondragstart= ' return False '
Onselectstart = ' return False '
Onselect= ' Document.selection.empty () '
Oncopy= ' Document.selection.empty () '
Onbeforecopy= ' return False '
Onmouseup= ' Document.selection.empty () '

===================================================

(1) Click event onclick
The onclick event is generated when the user clicks the button. The event handler or code specified by the onclick is invoked to execute. After the onclick equals sign, you can use your own functions as event handlers, or you can use the internal functions in JavaScript. You can also use JavaScript code directly, and so on.

(2) OnChange Change Event
This event is triggered when the input character value of the text or textarea element is changed, and the event is raised when an option state changes in the Select table item.

(3) Select Event Onselect
The event is raised when the text in the text or textarea object is highlighted.

(4) Get focus event onfocus
This event is generated when the user clicks the text or textarea and the Select object. The object becomes the foreground object at this point.

(5) Loss of focus onblur
This event is raised when the text object or the TextArea object and the Select object no longer have the focus.

(6) Loading file onload
This event is generated when the document is loaded. The effect of onload is to detect the value of a cookie when it is first loaded, and assign it a variable so that it can be used by the source code.

(7) Uninstalling files OnUnload
The OnUnload event is raised when the Web page exits, and the status of the cookie can be updated.

What is the JS event bubbling? Fires a class of events on an object (such as clicking the OnClick event), and if this object defines a handler for this event, then this event invokes the handler, and if the event handler is not defined or the event returns true, the event propagates to the object's parent object, from inside to outside, Until it is processed (all the same events of the parent object will be activated), or it reaches the topmost level of the object, the Document object (some browsers are windows). For example, the above page, divided into three layers: Divone is the outer layer, divtwo middle layer, hr_three is the innermost layer;

They all have their own click events, and the innermost a tag has an href attribute.

Run the page, click "Click Me", will pop up: I am the innermost----> I am the middle tier----> I am the outermost----> and then link to Baidu.

This is the event bubbling, originally I only clicked the tag with ID Hr_three, but did perform three alert operations.

Event bubbling process (denoted by tag ID): hr_three---->divtwo---->divone. Bubbles from the innermost layers to the outermost layer.

Block events (including bubbling and default behavior)

var stopevent = function (e) {

E = e | | window.event;

if (E.preventdefault) {

E.preventdefault ();

E.stoppropagation ();

}else{

E.returnvalue = false;

E.cancelbubble = true;

}

},

Block event bubbling only

var stoppropagation = function (e) {

E = e | | window.event;

if (!+ "\v1″) {

E.cancelbubble = true;

} else {

E.stoppropagation ();

}

}

Block browser default behavior only

var preventdefault = function (e) {

E = e | | window.event;

if (E.preventdefault) {

E.preventdefault ();

}else{

E.returnvalue = false;

}

}

Event.clientx returns the x-coordinate of mouse relative to the client window when the event occurs

Event. X, too.

However, if you set the Location property value of the event object to relative

Event.clientx not change

and the event. x returns the coordinates of the event object relative to the body

Event object Detailed Icooe 2000.3.31http://www.hzhuti.com

An event represents the state of an incident, such as the element where the event occurred, the location of the mouse, and so on, and the event object is only valid during the events.

event property:

Altkey

Retrieves the current state of the ALT key

Possible value true for off

False to not close

button

Retrieving the pressed mouse button

Possible values: 0 no keys.

1 Press the left button

2 Press the right button

3 Press the left and right key

4 Press the Middle key

5 Press the left and middle keys

6 Right-click and Middle-key

7 Press All the keys

Cancelbubble

Sets or retrieves whether the current event bubbles the event handle

Possible values: false to enable blistering

True to cancel the event blistering

ClientX

Retrieves the x-coordinate of the mouse cursor associated with the window client area, with the property read-only and no default value.

ClientY

Retrieves the y-coordinate of the mouse cursor associated with the window client area, with the property read-only and without a default value.

Ctrlkey

Ctrlkey retrieving the current state of the CTRL key

Possible value true for off

False to not close

Datafld

Retrieving columns affected by Oncellchange

Atransfer

Provides a pre-defined clipboard for a drag-and-drop operation.

Element

Retrieves an object pointer that exits during the on mouseover and onmouseout events

KeyCode

Sets or retrieves the Unicode keyword code associated with the keyword that raised the event

This property is used with onkeydown onkeyup onkeypress

If there is no keyword to raise the event, the value is 0

OffsetX

Retrieves the horizontal coordinates of the mouse position associated with the object that triggered the event

OffsetY

Retrieves the vertical coordinates of the mouse position associated with the object that triggered the event

PropertyName

Retrieves the name of an attribute that has changed on an object

Reason

Retrieving the results of data transfer from a DataSource object

Possible values:

0 Data Transfer Success

1 Data transfer failed

2 Data transfer Error

Recordset

Retrieving a reference to the default recordset in a data source object

This feature is read-only

Repeat

Retrieves whether an event is duplicated

This property returns true only if the onkeydown event is duplicated

Returnvalues

Sets or retrieves the value returned from the event

Possible values:

The value in the true event is returned

False the default action for events on the source object is canceled

ScreenX

Retrieves the horizontal position of the mouse associated with the user screen

ScreenY

Retrieves the vertical position of the mouse associated with the user screen

Shiftkey

Retrieves the current state of the Shiftkey key

Possible value true for off

False to not close

Srcelement

Retrieving the object that triggered the event

Srcfilter

Retrieving the filter object that caused the onfilterchange event to fire

Srcum

Retrieving the same resource name that triggered the event behavior

The attribute is set to NULL unless the following two conditions are true

1. Behavior is attached to the feature that triggered the event

2. The behavior defined in the previous bullet has specified a URN identifier and an event that has already been triggered

Toelement

Retrieves an object that is moved as an on mouseover or on Mouseout event result

Type

Retrieving event names in an event object

X

Retrieves an integer relative to the mouse horizontal coordinates of the parent feature

Y

Prosecution

ClientX Sets or gets the x-coordinate of the position of the mouse pointer relative to the window client area, where the customer area does not include controls and scroll bars for the window itself.

ClientY Sets or gets the y-coordinate of the position of the mouse pointer relative to the window's client area, where the customer area does not include controls and scroll bars for the window itself.

OffsetX Sets or gets the x-coordinate of the position of the mouse pointer relative to the object that triggered the event.

OffsetY Sets or gets the y-coordinate of the position of the mouse pointer relative to the object that triggered the event.

ScreenX Sets or gets the x-coordinate that gets the position of the mouse pointer relative to the user's screen.

ScreenY Sets or gets the y-coordinate of the mouse pointer position relative to the user's screen.

x Sets or gets the X-pixel coordinates of the position of the mouse pointer relative to the parent document.

Y Sets or gets the Y-pixel coordinates of the position of the mouse pointer relative to the parent document.

Event.clientx return event occurs, mouse relative to the client window's x-coordinate, event. X is the same. However, if the positional property value of the Set event object is Relative,event.clientx, and Event.x returns the coordinates of the event object relative to the body.

"Learning Notes" JS events and Events bubbling