JavaScript Event Object collation and detailed introduction of _javascript skills

Event Properties and methods:

1. Type: The types of events, such as Click in Onlick;

2. Srcelement/target: The event source, is the element that occurs;

3. Button: the mouse button declared to be pressed, Integer, 1 for the left, 2 for the right, 4 for the key, if you press more than one key, the wine added to these values, so 3 on behalf of the left and right keys pressed at the same time; (Firefox 0 for the left, 1 for the middle key, 2 for the right-hand button)

4. Clientx/clienty: The position of the mouse relative to the upper-left corner of the viewable document area of the browser window, in the DOM standard, which does not take into account scrolling of the document, that is, wherever the document scrolls, whenever the event occurs in the upper-left corner of the window, Clientx and Clienty are 0, so in IE, to get the coordinates of the event to occur relative to the beginning of the document, add
Document.body.scrollLeft and Document.body.scrollTop)

5. Offsetx,offsety/layerx,layery: When the event occurs, the mouse is relative to the position of the upper-left corner of the source element (this must define the position:relative; The value can be fixed absolute relative these kinds);

6. X,y/pagex,pagey: Retrieves the integer relative to the parent element mouse horizontal coordinate;

7. Altkey,ctrlkey,shiftkey, etc.: Returns a Boolean value;

8. KeyCode: Returns the key code of the KeyDown KeyUp event, as well as the Unicode character of the KeyPress event; (Firefox2 does not support Event.keycode, you can replace it with Event.which)

9. Fromelement,toelement: The former refers to the MouseOver event in the mouse moved the document elements, the latter refers to the Mouseout event in the mouse moved to the document elements;

Above support IE

The following Firefox support:

Event.relatedtarget; go there.
From there to use Event.srcelement | | Event.target

Cancelbubble: A Boolean property that, when set to true, further bubbles the Stop event to (capture) the containment-level element; (e.cancelbubble = true; equivalent to e.stoppropagation ();)

ReturnValue: A Boolean property that, when set to False, organizes the browser to perform the default event action; (E.returnvalue = false; equivalent to E.preventdefault ();)

Attachevent (), DetachEvent ()/addeventlistener (), RemoveEventListener: Methods for registering multiple event-handling functions for the development of DOM object event types, they have two parameters, The first one is the event type, and the second is the event handler function. In
When the Attachevent () event is executed, the This keyword points to the Window object, not to the element in which the event occurred;

ScreenX, ScreenY: The position of the mouse pointer relative to the upper-left corner of the display, and if you want to open a new window, these two properties are important;

HTML DOM innerheight, innerwidth properties

Definitions and usage

Read-only property that declares the height and width of the window's document display area, in pixels.

The width and height here do not include the height of the menu bar, toolbars, and scroll bars.

These properties are not supported by IE. It is substituted with the clientwidth and ClientHeight properties of Document.documentelement or document.body (associated with the version of IE).

Window Object

Window objects are supported by all browsers. It represents the browser window.

All JavaScript global objects, functions, and variables automatically become members of the Window object.

A global variable is a property of a Window object.

A global function is a method of a Window object.

Even the document of the HTML DOM is one of the properties of the Window object:

Window.document.getElementById ("header");

Same as this:

document.getElementById ("header");

Browser object Model (BOM)

There is no formal standard for the browser object model (Browser object models).

Window size

There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).

For Internet Explorer, Chrome, Firefox, Opera, and Safari:
-Window.innerheight-Internal height of the browser window
-Window.innerwidth-Internal width of the browser window

For Internet Explorer 8, 7, 6, 5:
-Document.documentElement.clientHeight
-Document.documentElement.clientWidth

Or
-Document.body.clientHeight
-Document.body.clientWidth

Practical JavaScript Scheme (covering all browsers):

Instance

var w=window.innerwidth |
| document.documentElement.clientWidth
| | document.body.clientWidth;

var h=window.innerheight |
| document.documentElement.clientHeight
| | document.body.clientHeight;

Give it a shot yourself.

This example shows the height and width of the browser window: (excluding toolbars/scroll bars)

Object objects

Object objects are of little use to themselves, but you should know them before you know other classes. Because object objects in ECMAScript are similar to Java.lang.Object in Java, all objects in ECMAScript are inherited by this object, and all the properties and methods in the object objects appear in other objects, so it is understood that Ob Ject objects, you can better understand other objects.

Object objects have the following properties:

Constructor

A reference (pointer) to the function that created the object. For object objects, the pointer points to the original object () function.

Prototype

A reference to the object's prototype of the object. For all objects, it returns an instance of Object objects by default.

Object objects also have several methods:

hasOwnProperty (property)

Determines whether an object has a specific attribute. This property must be specified with a string. (For example, O.hasownproperty ("name"))

isPrototypeOf (object)

Determines whether the object is a prototype of another object.

propertyIsEnumerable

Determines whether a given property can be enumerated with a for...in statement.

ToString ()

Returns the original string representation of an object. For object objects, ECMA-262 does not define this value, so different ECMAScript implementations have different values.

ValueOf ()

Returns the original value that best fits the object. For many objects, the method returns the same value as the return value of ToString ().

Note: Each of the properties and methods listed above will be overwritten by other objects.

Some notes:

1. Event represents the state of events, such as triggering an event object's elements, the mouse position and state, pressed keys, and so on;

2. The event object is valid only in the course of the occurrence.

Firefox in the event and IE in the different, ie in the global variable, ready to use, Firefox in the parameters to boot to use, is the run-time temporary variables.

In the Ie/opera is window.event, in Firefox is event, and the object of the event, in IE is window.event.srcElement, in Firefox is Event.target,opera both are available.

3. The following two sentences have the same effect

var evt = (evt)? EVT: ((window.event)? window.event:null);

var evt = evt | | window.event; Firefox under window.event is null, ie the event is null

4. The foaming of events in IE

In IE, events can bubble up to the top of the containment layer a little bit, that is to say, the event handlers defined by the underlying DOM nodes, to the upper nodes if there is an event handler for the same event type as the lower level, then the top-level event handler is executed. For example, a div tag contains a, and if both tags have a handler for the OnClick event, the execution is done by first executing the OnClick event handler for label A, and then executing the DIV's event handler function. If you do not want to execute the OnClick event handler for the Upper Div after the event handler function is finished, set the cancelbubble to true.

var s=+newdate ();

The explanation is as follows: =+ does not exist;

+new Date () is a thing;

+ equivalent to. valueof ();

See the reply to Add. GetTime () This is also the number of milliseconds

4 The same result returns the number of milliseconds
alert (+new Date ()) of the current time;
Alert (+new Date);
var s=new Date ();
Alert (s.valueof ());
Alert (S.gettime ());

Thank you for reading, I hope to help you, thank you for your support for this site!