Summary of native JavaScript events

Last Update:2015-03-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JavaScript native events, summed up, including the event flow, processing functions, event object these things. And in terms of compatibility, the main is the old IE8 and the following and modern browser differences, IE and DOM event standard differences.

Event Flow
This event flows ie4 and Netscape4, but the flow of events proposed by the two companies is exactly the opposite. IE is event bubbling, Netscape is event capture.
IE will bubble up from the element that triggered the event until the document element. IE8 the following include IE8

Netscape is the element that propagates from the document element down to the triggering event.

The DOM standard suggests that the flow of events be divided into three processes:
The capture phase is first: captured like Netscape, but the target element in the capture phase is not receiving events.
Then the target phase: The event that triggers the target element.
Finally, the bubbling phase: just like IE's bubbling.

But the DOM event streams implemented by ie9+ and other browsers are a bit different from the standard. The main thing is to extend the top of the event stream to window. Also, the target element is subject to an event during the capture phase.

In other words, the event of the target element is triggered two times.

The event handler
has three ways to bind an event handler to an element.
A, HTML properties
<a onclick= "alert (' click ')" ></A>
This is used to directly invoke Event,this in the function to point to the current element. But this approach is generally not applicable.

B, JS element properties
This way of compatibility is good, all browsers are supported. But there is a compatibility issue. That is, the Ie8-event object is passed in as a property of window rather than as a parameter. So write it like this.

 <!doctype html> document.getElementById ( ' a '). onclick = function   = Event | |             window.event;        alert (event); }  </script></body>

c, DOM2 event binding
mainly refers to the elements of the AddEventListener () and RemoveEventListener (). The former binds and the latter is removed.
Both functions have three parameters,

The third is a Boolean value, and true means that the handler function is called during the capture phase. False indicates that the handler function is called during the bubbling phase.

<!doctype html>        document.getElementById (' a '). AddEventListener (' click ',  function(event) {            alert (event);        },false)

If you want to unbind, someone might:

 <!doctype html> document.getElementById ( ' a '). AddEventListener        (' click ', function   false  ) document.getElementById ( ' a '). RemoveEventListener (' click ', function          false  )  </script></ Body>

but this is not going to be successful. Because the function is an object, two anonymous functions are different objects, not equal. So there's no way to unbind an anonymous function. Can only think of the following, a function of a name.

 <!doctype html>var  handler = f        Unction   ' a '). AddEventListener (' click ', Handler,false   ' a '). RemoveEventListener (' Click ', Handler, false  )  </script></body>

Ie8-'s browser does not support DOM2-level events, but there are similar methods attachevent () and DetachEvent (), and the usage is the same, just because ie8-has only bubbling process so there is no third argument. There is also a first parameter to add ' on ', such as the Click event is ' onclick '. In addition, this in the function points to window.

Event Object

All event objects in JS are inherited from event. What the event object looks like in Chrome (left) and Firefox (right).

You can see that the event object is still a bit different in the browser. However, the following properties and methods are common.

Bubbles	Whether to bubble
Cancelable	Whether the default behavior can be canceled
Currenttarget	Current elements
Target	Target element
defaultprevented	Whether the default behavior has been blocked
Type	Event Type
Eventphase	Event stream which Phase 1 captures 2 target 3 bubbling
Detail	Some information
Trusted	JS created as false, browser created as True
View	Equal to Window
Preventdefault ()	Block default behavior
Stoppropagation ()	Block bubbling and capturing
Stopimmediatepropagation ()	Stop bubbling and capturing now

In the Ie8-event object, this looks like this:

Cancelbubble	Whether to cancel bubbling, true first top stoppropagation ()
ReturnValue	The return value, false equivalent to Preventdefault ()
Srcelement	Target element, equivalent to target
Type	Event Type

UI Events
load: Page loaded, img image loaded, all frames loaded, embedded content loaded on object element triggered. The,<script> element in the Ie9+ browser also triggers the event.
Note: When the page is loaded, all external css,js, images, etc. are downloaded.
The IMG element, once the SRC attribute is added, begins the download.
The script element must be inserted into the document before the download begins.
The event object for this event does not contain any information, except that it has target information in the DOM-compatible browser.
An image that was not added to the document before IE8 does not generate an event object.
unload: Triggered when the document is uninstalled completely.
Resize: When the browser window is resized.
Note: Pre-IE8 event does not provide any attributes.
DOM-compatible browsers provide target=document.
The old version of Firefox will not be triggered until it stops changing, and now all browsers will be triggered once for each pixel change.
Scroll: Occurs in the Window object, which indicates that the document is scrolled. can be monitored by the BODY element's scrollleft and scrolltop.
Note: After testing now Chrome,safari supports both properties on the body, Ie11,firefox supports both of these properties on the documentelement. So write it like this scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;

Focus Event
Focus,focusin will trigger on the element that gets focus, focus does not bubble, Focusin bubbles.
Blur,focusout is triggered on the element that loses focus, Blur does not bubble, focuout bubbles.

Mouse and Wheel Events
Click: can be triggered by the mouse or keyboard, bubbling.
DblClick: Triggered by double-clicking the mouse main button (some browser keys and right-click can also). Bubble.
The process of triggering dbclick: Mousedown--mouseup--click--mousedown--mouseup--click--dblclick
But IE8 and previous browsers have Bug:mousedown--mouseup--click--mouseup--dblclick
Mousedown/mouseup: Press any mouse button/release. Bubble.
Note: When an element is pressed to trigger the MouseDown of this element, if the move is not released to another element at release, it will trigger the mouseup of the latter element.

MouseEnter: Triggers from outside the element inside the element. Not bubbling. Entering descendant elements is not triggered. ie, firefox9+, opera support.
MouseLeave: The element that is moved from within the element is triggered. Not bubbling. Entering descendant elements is not triggered. ie, firefox9+, opera support.

MouseOver: Triggered when inside an element. Bubble.
Mouseout: Triggered when an element is moved out. Bubble. Moving into descendant elements is also triggered.

MouseMove: When moving inside an element. Bubble.

In these events, the event object will have some new properties.
In the DOM standard.

ClientX, ClientY
which	1, left 2, right 3, middle
Detail	Click Count
Ctrlkey
Altkey
Metakey
Shiftkey
PageX, Pagey
ScreenX, ScreenY

in IE8 and previous browsers

ClientX, ClientY
button	0: Not pressed, 1: Main mouse, 2: Secondary mouse, 3: Press the primary button at the same time, 4: Middle button, 5: Primary and middle button, 6: Press Next and right mouse, 7: Three are pressed
OffsetX, OffsetY
Ctrlkey
Altkey
Metakey
Shiftkey
Fromelement	MouseOver
Toelement	Mouseout

jquery uses which instead of buttons and which for unification.

if (!event.which && button!== undefined) {                = (Button & 1? 1: (Button & 2? 3: (Button & Amp 4? 2:0))) ;            }

Using bit and operation, the button's 1, 3, 5, 7 are corrected to 1;2,6 to 2;

keyboard and text event
keydown: Press the keyboard to trigger any key, press the non-release will be repeated trigger.
KeyUp: Releasing the keyboard key is triggered. The
above event has a keycode that represents the key code for pressing the key. The numeric letters are the numbers in ASCII and lowercase letters are encoded. CharCode is 0.
in Firefox and opera, press the semicolon KeyCode to ASCII 59;ie,safari and chreome for key code 186.

KeyPress: Pressing the character key is triggered. ie9+ browser, CharCode equals ASCII code. At this time the keycode is not sure, different browsers may be 0, key code or ASCII code.
in IE8 and opera, KeyCode equals the ASCII code. So cross-browser:
1. ```
 charcode = Event.charcode | | Event.keycode   
```
The order of the three events is keydown--keypress--keyup. The first two events precede a text box change.
Change events
Domsubtreemodified: Triggered when any change in the DOM structure occurs, after other change events. Bubble. The target is the parent element of the element that is inserted or deleted.

Domnodeinserted: Triggered when one node is inserted into another node. Bubbling, the target is the node being inserted, Event.relatednode is the parent element, and the document is inserted when it is triggered.
Domnodeinsertedintodocument: Triggered after domnodeinserted. triggered after the domnodeinserted. Does not bubble, the target is to delete the node or descendant nodes, from the deleted node to the order of the descendant elements.

Domnoderemoved: A node removal is triggered. Bubble. The event target is the node that is triggered, Event.relatednode is the parent element, and is not deleted from the document when it is triggered.
Domnoderemovedfromdocument: Triggered after domnoderemoved. Does not bubble, the target is to delete the node or descendant nodes, from the deleted node to the order of the descendant elements.

Domattrmodified: Triggered after the feature has been modified.
Domcharacterdatamodified: Triggers when the value of a text node changes.

These events are bound successfully through the DOM2 binding method. Ie9+,o9+,ff3+,s3+,c support.

Summary of native JavaScript events

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Summary of native JavaScript events

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Summary of native JavaScript events

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support