Event Flow 602
Event Bubbling 602
Event Capturing 603
DOM Event Flow 603
Event Handlers 604
HTML Event Handlers 604
DOM Level 0 Event Handlers 606
DOM Level 2 Event Handlers 607
Internet Explorer Event Handlers 608
Cross-Browser Event Handlers 610
The Event Object 611
The DOM Event Object 611
The Internet Explorer Event Object 615
The Cross-Browser Event Object 617
Event Types 619
UI Events 619
 The load Event 620
 The unload Event 622
 The resize Event 623
 The scroll Event 624
Focus Events 624
Mouse and Wheel Events 625
 Client Coordinates 627
 Page Coordinates 628
 Screen Coordinates 628
 Modifier Keys 629
 Related Elements 630
 Buttons 631
 Additional Event Information 632
 The mousewheel Event 633
 Touch Device Support 633
 Accessibility Issues 634
Keyboard and Text Events 634
 Key Codes 635
 Character Codes 636
 DOM Level 3 Changes 637
 The textInput Event 638
 Keyboard Events on Devices 639
Composition Events 640
Mutation Events 641
HTML5 Events 641
 The contextmenu Event 641
 The beforeunload Event 643
 The DOMContentLoaded Event 643
 The readystatechange Event 644
 The pageshow and pagehide Events 645
 The hashchange Event 647
Device Events 647
 The orientationchange Event 647
 The deviceorientation Event 648
 The devicemotion Event 650
Touch and Gesture Events 651
 Touch Events 651
 Gesture Events 653
Event Reference 654
Memory and Performance 659
Event Delegation 659
Removing Event Handlers 661
Simulating Events 662
DOM Event Simulation 663
 Simulating Mouse Events 663
 Simulating Keyboard Events 664
 Simulating Other Events 667
 Custom DOM Events 667
Internet Explorer Event Simulation 668
Summary 669

------------------------------------------------

事件对象的新属性：defaultPrevented，detail,stopImmediatePropagation(),trusted

---------------------------------------------------------

When the user presses a character key once on the keyboard, the keydown event is fired first, followed by the keypress event, followed by the keyup event. Note that both keydown and keypress are fired before any change has been made to the text box, whereas the keyup event fires after changes have been made to the text box. If a character key is pressed and held down, keydown and keypress are fired repeatedly and don’t stop until the key is released.

----------------------------------------------

需要实践的事件：

1， keyboard on the mobile devices

orientationchange，window.orientation，deviceorientation，devicemotion，Gesture Events

---------------------------------------------------------

The DOMContentLoaded event always fires before the load event.

-----------------------------------------------------

document.addEventListener("readystatechange", (event) => {
 if (document.readyState == "interactive" ||
    document.readyState == "complete") {
  document.removeEventListener("readystatechange", arguments.callee);
  console.log("Content loaded");
 }
});

-----------------------------------------------

pageshow fires whenever a page is displayed, whether from the bfcache or not. On a newly loaded page, pageshow fires after the load event; on a page in the bfcache, pageshow fires as soon as the page’s state has been completely restored. Note that even though the target of this event is document, the event handler must be attached to window. 

---------------------

pagehide fires immediately before the unload event.

--------------------

Pages that have an onunload event handler assigned are automatically excluded from the bfcache, even if the event handler is empty.

--------------------------------------------------------

The hashchange event notifys developers when the URL hash changed. This came about as developers frequently used the URL hash to store state information or navigational information in Ajax applications.

-------------

The onhashchange event handler must be attached to the window.

--------------------------------------------------------

1. touchstart
2. mouseover
3. mousemove (once)
4. mousedown
5. mouseup
6. click
7. touchend

--------------------------------------------------------

let textbox = document.getElementById("myTextbox"),
event;

// create event object the DOM Level 3 way
if (document.implementation.hasFeature("KeyboardEvents", "3.0")) {
 event = document.createEvent("KeyboardEvent");

 // initialize the event object
 event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",
 0, "Shift", 0);
}
// fire the event
textbox.dispatchEvent(event);