20150204--js consolidation and strengthening 2-02

Iii. Event Object 1, what is event object

A: In JavaScript, when an event occurs, the system stores the event-related information in an object, which we call the event object.

Like what:

When you move the mouse, the JavaScript engine automatically stores related information such as the horizontal ordinate of our mouse in the event object.

When the keyboard is pressed, the JavaScript engine automatically stores relevant information such as the key value keycode of our keyboard in the event object. 2. How to get the event object

The IE model is obtained using the following method:

Window.event Event Object

Under the model, the following methods are used to obtain

Handlers for events

function (event) {

Event is our object of events.

} 3, how to prove the existence of the event object?

Example code:

Event Object Demo:

4, Case: Get the key of the keyboard and the left and right four keys, and make the corresponding judgment

Operating effect:

Iv. Bubble Model 1, what is bubble model

A: In JavaScript, the response of an event will rise to the top of the topmost object, and we'll bubble up the process. 2, prove the existence of event bubbling?

Example code:

Operating effect:

3. Event bubbling schematic diagram

4. Event Bubbling Solution

Note: In some cases, event bubbling is not something we want, it may interfere with our events, so we need to address it.

Under IE Model:

Window.event.cancelBubble = true;

Under the model:

function (event) {

Event.stoppropagation (); Block event bubbling

}

Example code:

How do I resolve compatibility issues?

Answer: Package code (PUBLIC.JS)

The method is called as follows:

V. Default behavior 1, what is the default behavior

A: In HTML code, some tags behave as code defaults, and we call this behavior the default behavior.

such as a tag, when we click, the system will automatically jump to the specified page

such as the Submit button, when we click, the system will automatically submit the form

For example, sometimes we do not need these default behavior, such as when we delete a database record, if the user does not confirm whether to delete, we can not directly submit processing through a tag, such as when we submit the form, if the user data is incomplete, we should not allow the form submission. 2. How to cancel the default behavior of HTML tags

Basic syntax:

Under IE Model:

Window.event.returnValue = false;

Under the model:

function (event) {

Event.preventdefault ();

}

Example code:

3. Resolve compatibility issues

Public.js (supported in IE9 versions below)

HTML calling code

In today's JavaScript code, we can usually take the return false, which directly blocks the default behavior of the element. Vi. BOM Model 1, what is a BOM model

When we open a Web application, the system automatically generates a BOM model, the topmost object of which is the Window object, and the document, screen, and location that we normally use belong to the properties of the Window object. 2. BOM Model schematic diagram

3. Common BOM Model properties and methods

Four properties commonly used by Window objects

Navigator

Location

Document

Screen

1) Common properties and methods under the Window object

L alert (Message): Popup window

L Confirm (Message): Confirm box (delete confirmation)

L prompt (Message[,defstr]): Prompt input Box

L open (Url[,name[,features]]): Popup window

L Close (): Close the current window

L Blur (): Lose focus

L Focus (): Get the spotlight

L print (): printing (important)

L Moveby (x, y): relative movement

L moveTo (x, y): absolute movement

L Resizeby (x, y): relative change in size

L Resizeto (x, y): absolute change in size

L Scrollby (x, y): relative scrolling

L scrollTo (x, y): absolute scrolling

L setTimeout (expression, MS)

L cleartimeout (Timer object)

Example 1:prompt Prompt Input window

Example 2: Pop-up Windows window

Example 3: Print function implementation

Example 4: Back to Top

2) The Open method parameter description in the Window object:

L MenuBar: Menu bar

L Toolbar: Toolbar

L ScrollBars: Scroll bar

L Fullscreen: Fullscreen

L Directories: Link tool

L Location: Address bar

L Status: State Bar

L Resizable: Whether size can be resized

The above parameter has only two values: Yes,no

L width, height, left, top

3) Navigator (Browser object clientinfomation)

L appCodeName: Browser kernel name

L AppName: Browser release version name

L appversion: Browser kernel version

L Platform: Operating System Information

L Online: Whether to work offline

L Cookieenabled:cookie is available

Example code:

Operating effect:

UserAgent User code Information

4) Location Object

L Host: Host name

L Port: Port number

L HREF: Link address (attribute) Location.herf = ';

L Pathname: File path

L Protocol: Protocol (HTTP:HTTPS);

L Search: Query keywords (? String after the number)

L Assign (URL): Jump to the specified URL location.assign (URL);

Example code:

Effect:

5) Screen object (description of display information)

L availheight: Available height

L Availwidth: Usable width

L colordepth: Color Depth (0-256) 24

L Height: Screen altitude

L Width: Width of screen

Example code:

Operating effect:

6) Document Object

When we open an HTML page, the system automatically generates a DOM model, which is the document object at the top of the model.

L LinkColor: Link text color

L Alinkcolor: The link text color being accessed

L Vlinkcolor: Link color has been visited

L BgColor: Background color

L Fgcolor: Font Color

L Title: page title

Case: Title Display new message feature implementation

Effect:

getElementById ("id"): Gets the specified DOM object by ID

Getelementsbyname ("name"): Gets the specified DOM object (returned array) through the Name property

getElementsByTagName ("TagName"): Gets the specified DOM object (returned array) by tag name 4, timer

SetTimeout

SetInterval

Parameter description:

First parameter function name

Second parameter time (in number of milliseconds)

Example 1: Pop up a hello pop-up window

Example 2: A hello window pops up after three seconds

Example 3: A hello window pops up every 3 seconds

Method One: Recursion by settimeout

Method Two: Through SetInterval

Job: Programming The online clock: show hours minutes minutes and seconds 17:19:00

20150204--js consolidation and strengthening 2-02