Professional JavaScript for Web Developers 第四版學習筆記 CHAPTER 17:Events
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);