JavaScript Event Basics

One: Event flow

The event flow describes the order in which events are received from the page.

Event bubbling

    <DivID= "One">        <DivID= "both">            <DivID= "three">Click</Div>        </Div>    </Div>

    document.getElementById ("one"). AddEventListener ("click", Clickone); The default last parameter is False, which indicates the event bubbling mechanism    document.getElementById ("one"). AddEventListener ("click", Clicktwo);    document.getElementById ("three"). AddEventListener ("click", Clickthree);     function Clickone () {        Console.log ("Click on One");    }     function Clicktwo () {        Console.log ("click on")    }     function Clickthree () {        Console.log ("Click on Three");    }

Click on the div with ID three, which will print out the results: Click on three, click on the one, click on the One.

Event capture

document.getElementById ("one"). AddEventListener ("Click", Clickone,true); Change the last parameter to Ture, that is, implement the event capture mechanism document.getElementById ("AddEventListener" ("click", Clicktwo,true); document.getElementById ("three"). AddEventListener ("Click", Clickthree,true); functionClickone () {Console.log ("Click on One"); }    functionClicktwo () {Console.log ("Click on both"); }    functionClickthree () {Console.log ("Click on the Three"); }

Clicking on the div with the ID three will print the result: Click one, click on the one, and click on the three.

Second: event handling mechanism

1.HTML Event handlers

    <DivID= "One">        <DivID= "both">            <DivID= "three"onclick= "Clickthree ()">Click</Div>        </Div>    </Div>

function Clickthree () {
    Console.log ("Click on Three");
}

2.dom0 Level Event handlers

    var btn2 = document.getElementById ("both");     function () {        Console.log ("click on");    }

Btn2.onclick = null; //Delete event handlers

3.dom2 Level Event handlers

The DOM2 level event defines 2 methods for handling the operation of specifying and deleting event handlers, AddEventListener (), and RemoveEventListener ().

All DOM nodes contain these two methods, they contain three parameters, the first argument is the event type, the second argument is the event function, the third argument is a Boolean value,

If true, the event stream is a capture event, and if it is false, then the event stream is a bubbling event;

 document.getElementById ("one"). AddEventListener ("click"  "a"). AddEventListener ("click"  "three"). AddEventListener ("click" document.getelementbyid ( 　　 "one"). RemoveEventListener ("click", Clickone); Remove event  function   Clickone () {Console.log    ( "Click on one"  function   Clicktwo () {Console.log ( "Click on the"  function   Clickthree () {Console.log (    span> "clicked three" 

on the whole, which one registers first, which executes first. In addition, the old version of IE and cross-browser problems will not be discussed, are some historical outdated issues.

Third, the event object

When triggering an event on the DOM, an event object is generated that contains all the information about the event, including the element that caused the event, the type of the event, and other information related to the particular event.

There are some important common properties and methods, such as:

Type property: Used to get the event type

Target property: Used to get the event target

Stoppropagation method: Used to block event bubbling

E.preventdefault () Method: block The default behavior of an event (such as a tab jump)

var btn = document.getElementById ("btn"function(e) {    console.log (e);}

Let's take a look at the meaning of the most basic members, as follows:

Properties/Methods	Type	Meaning
Bubbles	Boolean	Whether the event bubbles
Cancelable	Boolean	Whether the default behavior of an event can be canceled
Currenttarget	Boolean	The element in which the event handler is currently processing the event
defaultprevented	Boolean	True indicates that the Preventdefault () has been called
Detail	Integer	Event-specific details
Eventphase	Integer	Call event handler stage: 1 for capture phase, 2 table "In Target", 3 indicates the bubbling phase
Preventdefault ()	Function	Cancels the default behavior of the event. If Cancelable is True, you can use this method
Stopimmediatepropagation ()	Function	Cancels further capture or bubbling of the event, while blocking any The event handler is called
Stoppropagation ()	Function	Cancels further capture or bubbling of the event. If Bubbles Is true, you can use this method
Target	Element	The goal of the event
Type	String	The type of event being triggered
View	Abstractview	The abstract view associated with the event. Equivalent to the occurrence of an event Window object

Understanding currenttarget and target

Inside the event handler, this is always equal to the Currenttarget value, which means that currenttarget is the element that is currently being triggered or is handling the event, and target is the current target element;

For example, the following code, the BTN button triggers a click event, then E.currenttraget points to This,e.target also points to this, the following code:

var btn = document.getElementById ("btn"function(e) {    this//  truethis    );  // true}

But if I trigger a click on Document.body, then e.currenttarget points to document.body, so e.target points to the BTN element, the following code:

function (e) {    //  truethis    );  // true    // true};

Now you should be able to understand the difference between Currenttarget and target! Currenttarget refers to the element that is clicked, but target is the object element of the current click,

As in the code, the click event bubbled up to Document.body, where the event was processed because there were no events registered on the BTN.

4. Event Type:

4.1 Mouse Events : When the user through the mouse on the page action;

1. Click event: The user clicks the mouse button or presses the ENTER key to trigger;

2. DblClick event: Triggered when the user double-clicks the mouse button;

3. MouseOver event: When the mouse pointer is outside the element, the user is moved to the boundary of another element, and the sensation is similar to the MouseEnter event;

4. Mouseout event: The user moves it into another element and is triggered.

5. MouseEnter event: Triggered when the mouse cursor moves from outside the element to the range of elements;
6. MouseLeave event: Triggered when the mouse cursor moves from inside the element to the range of the element, and the event does not bubble;
7. MouseMove event: Fires repeatedly when the mouse pointer moves inside an element.
8. MouseDown event: Triggered when the user presses any mouse button, the event cannot be triggered by the keyboard.

9. MouseUp event: Triggered when the user releases the mouse button;

All the elements on the page support mouse events, except for MouseEnter and MouseLeave, all mouse events will bubble or be canceled, and canceling the mouse event would affect the browser's default behavior.

4.2 Focus Event: triggers when the element Gets or loses focus;

Blur: Triggered when an element loses focus, this event does not bubble and is supported by all browsers.

Foucs: Triggered when the element receives focus, this event does not bubble and is supported by all browsers.

JavaScript Event Basics