JavaScript's DOM-8 Event object (Event overview, event handling, events object)

I. Overview of EVENTS

Event Overview

-When a user interacts with a Web page, the interpreter creates an event object to describe the incident information. The common events are:

-The user clicks on a content on the page

-mouse over a specific element

-The user presses a key on the keyboard

-The user scrolls the window or changes the window size

-page element loading completed or failed to load

- ...

-1995 IE4 Browser has defined its own event model, and the DOM model finally determines the standard event model for 2004 years and is supported by other browsers. So event handling requires attention to compatibility issues

Event handle

-an event handle (also known as an event handler function, an event listener function), which is a function called in response to an event. Each event corresponds to an event handle, and the corresponding function or statement is assigned to the event handle when the program executes, and the browser executes the specified function or statement when the event occurs

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/64/wKiom1b91t-gMYVbAABss6Ewwxw932.png "title=" Web.png "alt=" Wkiom1b91t-gmyvbaabss6ewwxw932.png "/>

Second, event processing

Event definition

-Three ways to define a listener function for a specific event

-Define event-related properties for elements directly in HTML

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/64/wKiom1b92jfgoa-3AAAf7Lc6Oks179.png "title=" Web.png "alt=" Wkiom1b92jfgoa-3aaaf7lc6oks179.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/ 7e/64/wkiom1b92kuhauoaaaaxcz2niny942.png "title=" Web.png "alt=" Wkiom1b92kuhauoaaaaxcz2niny942.png "/>650" this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/60/wKioL1b92wfzNZDSAAAcDFEn37k071.png "title=" Web.png " alt= "Wkiol1b92wfznzdsaaacdfen37k071.png"/>

-Assign values to the event-related properties of an element in JavaScript

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/62/wKioL1b98KbxcC6aAAAZn1Dyc4I773.png "title=" Web.png "alt=" Wkiol1b98kbxcc6aaaazn1dyc4i773.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/ 7e/66/wkiom1b98baso6izaaapxytctz0834.png "title=" Web.png "alt=" Wkiom1b98baso6izaaapxytctz0834.png "/>650" this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/62/wKioL1b98NSiZbkMAAAg3pMfrdM061.png "title=" Web.png " alt= "Wkiol1b98nsizbkmaaag3pmfrdm061.png"/>

-Advanced event handling, an event can bind multiple listener functions:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/66/wKiom1b9-0XBR6L2AAA505VWGrs483.png "title=" Web.png "alt=" Wkiom1b9-0xbr6l2aaa505vwgrs483.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/ 7e/66/wkiom1b9-13jzddmaabraxc3sho696.png "title=" Web.png "alt=" Wkiom1b9-13jzddmaabraxc3sho696.png "/>650" this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/62/wKioL1b9_BbRpGBUAAAjYrZlH04773.png "title=" Web.png " alt= "Wkiol1b9_bbrpgbuaaajyrzlh04773.png"/>

-Usually the browser may perform the default action associated with the event after it is passed and processed. For example:

-If the input type attribute in the form is "submit", the form will be submitted automatically when clicked;

-When the INPUT element's KeyDown event occurs and is processed, the browser will automatically append the characters typed by the user to the value of the INPUT element by default

-The default behavior of events can be blocked by the following methods

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/66/wKiom1b-Bb2Dvb9WAAAnZ5vtFyQ756.png "title=" Web.png "alt=" Wkiom1b-bb2dvb9waaanz5vtfyq756.png "/>

Event Cycle

-After an event object is created by the interpreter, it is propagated between HTML elements in the following procedure:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/63/wKioL1b-B13wQV8aAAOR92W7sm0467.png "title=" Web.png "alt=" Wkiol1b-b13wqv8aaaor92w7sm0467.png "/>

Handling Mechanisms for events

-bubbling processing mechanism of events

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/67/wKiom1b-B3Syt3QzAAB9gWFNXFo170.png "title=" Web.png "alt=" Wkiom1b-b3syt3qzaab9gwfnxfo170.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/67/wKiom1b-B-yjW3f9AAClSXFH9x0581.png "title=" Web.png "alt=" Wkiom1b-b-yjw3f9aaclsxfh9x0581.png "/>650" this.width=650; "src=" http://s4.51cto.com/wyfs02/M01/ 7e/67/wkiom1b-ch-cmh3zaamvih4v8ha257.png "title=" Web.png "alt=" Wkiom1b-ch-cmh3zaamvih4v8ha257.png "/>

Third, the event object

Event Object

-an event object will be generated when anything is triggered

-the event object records information such as the mouse position, keyboard key state, and trigger object when an event occurs, and the common properties of the events object:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/63/wKioL1b-C0ngDsxtAAL7dRNRZRE038.png "title=" Web.png "alt=" Wkiol1b-c0ngdsxtaal7drnrzre038.png "/>

Get Event Object

-Need to consider browser compatibility

-IE Browser

-JS or HTML code directly using the event keyword

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/63/wKioL1b-DNvzOQnHAAFD_IoUCBQ543.png "title=" Web.png "alt=" Wkiol1b-dnvzoqnhaafd_ioucbq543.png "/>-Firefox Browser

-the event keyword can be used directly in the HTML code

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/63/wKioL1b-Diyyfs-uAABO8Ox3Ur0960.png "title=" Web.png "alt=" Wkiol1b-diyyfs-uaabo8ox3ur0960.png "/>

-the event keyword cannot be used directly in JS code

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/67/wKiom1b-DZ7x0W3XAABCyJrJX38653.png "title=" Web.png "alt=" Wkiom1b-dz7x0w3xaabcyjrjx38653.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/63/wKioL1b-DsSyo7yZAAE2OHxI3JE732.png "title=" Web.png "alt=" Wkiol1b-dssyo7yzaae2ohxi3je732.png "/>

-In HTML code, when the event handle is defined, the event object is passed as a parameter to the method using the Events keyword

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/63/wKioL1b-D1WQkga-AAEQD-7FyaM888.png "title=" Web.png "alt=" Wkiol1b-d1wqkga-aaeqd-7fyam888.png "/>

Using the Event object

-For event objects, you often need to get the source of events

-Event source, which is the element that triggered the event (the target node of the event)

-IE Browser: event.srcelement

-Firefox Browser: event.target

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/67/wKiom1b-EhWDm2LwAAGeJriA3Xc526.png "title=" Web.png "alt=" Wkiom1b-ehwdm2lwaagejria3xc526.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/ 7e/63/wkiol1b-etsryqtgaaea2okli9o727.png "title=" Web.png "alt=" Wkiol1b-etsryqtgaaea2okli9o727.png "/>

Summary: This chapter focuses on JavaScript DOM event Objects (event overview, event handling, events objects)

This article from the "Technical Exchange" blog, declined reprint!

JavaScript's DOM-8 Event object (Event overview, event handling, events object)