Learn the front end JAVASCRIPT-7, JavaScript base event from scratch

1: Event-driven

1) Event : The so-called event is JS detected by the user's operation or the page of some behavior (how to happen)

2) Event source object: The element that raised the event. (who is happening to whom)

3) event handler: the program or function that handles the event (what happened)

4) Event object: What happens when the event occurs, (which key to press when the keyboard is pressed or where the mouse cursor is in the page, etc.).

2: Event Classification

1. Mouse events

OnClick Click mouse

OnDblClick Double-click mouse

onmousedown mouse button down

OnMouseUp Mouse Lift

OnMouseMove Mouse Movement

onmouseover Mouse Up

onMouseOut Mouse Away

Onmouseenter Mouse Entry

OnMouseLeave Mouse Away

2. Keyboard events

onkeyup Keyboard Lift

OnKeyDown Keyboard Press

onkeypress Keyboard Press or hold

Explanation: The difference between onkeydown and onkeypress

onkeypress supports a key press-down event that can enter content in the text area;

OnKeyDown all keyboards are triggered by a pressed event

3. Form events (see Dom for a detailed explanation)

OnSubmit Submit

Onblur loses focus (content changes, loses focus trigger)

Onfocus Get Focus

onchange Changing the contents of a text area

4. Page Events

OnLoad when page loading is complete

onbeforeunload when the page uninstallation is complete

3: Bind event

1) To bind an event handler:

1. Bind in the script. (the corresponding event is bound by getting the element)

2. Bind directly in the HTML element. (the tag attribute is called the event, the specific implementation is placed in the JS file or the internal script area) (not recommended: structure, style, behavior separation)

2) To bind multiple event handlers:

1. Write for yourself.

2.IE: (Multiple function execution order: IE9/10 is executed in the order of binding, IE7/8 in reverse order.) ）

Object. Attachevent ("event (ON)", "handler") Add Event Listener

Object. DetachEvent ("event (ON)", "handler") Delete event listener

Firefox: (Multiple function execution order: executed in the order of binding.) ）

Object. AddEventListener ("event" (not added), "handler", Boolean) add

Object. RemoveEventListener ("event" (not added), "handler", Boolean) Delete
Error-prone points:

An event handler uninstalls the listener by invoking a declarative function

//Error usage object. AddEventListener ("click", Function () {},false); object. RemoveEventListener ("click", Function () {},false)// The listener event cannot be deleted, function () {} The newly created functions point to the different//correct usage objects with the function that added the listener call. AddEventListener ("Click", Fun (), false); RemoveEventListener ("Click", Fun (), false); function Fun () {}//functions  that invoke declarative functions by function name

Compatibility wording:

function Bindevent (obj,type,fun) {if (Obj.addeventlistener) {//three parameters, execute Obj.addeventlistener in the binding order ("event does not add On,eg:click" , Fun (), False (default false, can not write)} else{//Two parameters, execute obj.attachevent in reverse order ("event plus On;eg:onclick", Func)}}

4: Event Object

An object used to record information about events that occurred.

1. Only occur when an event occurs, and can only be accessed within the processing function.

2. The processing function is automatically destroyed after the operation is finished.

How to get an Event object:

IE:window.event

Firefox: Object. On event =function (EV) {}

5: About Mouse Event Object Properties

1) relative to the browser location:

ClientX the position of the mouse relative to the x-axis of the browser when the mouse event occurs.

ClientY the position of the mouse relative to the y-axis of the browser when the mouse event occurs.

2) relative to the document location:

PageX the position of the mouse relative to the x-axis of the document when the mouse event occurs. (Ie7/8 None)

Pagey the position of the mouse relative to the y-axis of the document when the mouse event occurs. (Ie7/8 None)

3) Relative to the screen position:

ScreenX the position of the mouse relative to the x-axis of the screen when the mouse event occurs.

ScreenY the position of the mouse relative to the y-axis of the screen when the mouse event occurs.

4) Location relative to event Source:

OffsetX the position of the mouse relative to the x-axis of the event source when the mouse event occurs.

OffsetY the position of the mouse relative to the y-axis of the event source when the mouse event occurs.

Event.button: Returns an integer that indicates which mouse button was clicked when the event was triggered. 0 Specify the left mouse button, 1 specifies the mouse wheel, 2 specifies the right mouse button. However, the old version of IE does not comply with the specifications of the Internet , its Button property meaning as follows: 1 left mouse button 2 right mouse button 3 at the same time press 4 wheel 5 left button plus the wheel 6 right button plus the wheel 73 simultaneously. currently IE11.0 version, no compatibility issues.

Learn the front end JAVASCRIPT-7, JavaScript base event from scratch