Understanding event Processing in jquery learning---------

3 Types of event models:

Original Event Model

DOM Event model

IE Event Model

Original event model (level 0 event model)

1, the event handler is defined as a function instance and then bound to the DOM element event object to implement the registration of the event.

Example: var btn = document.getelementsbytagname ("input") [0];

Btn.onclick = function () {

function body ....

}

2, you can also assign a specific event handler function body directly to the DOM element's event properties

Example: <input type= "button" onclick= "alert (' Hello ')"

Advantages and disadvantages of the 0-level event model:

Advantages: Easy to use

Cons: element attributes are used to store references to event handlers,

Therefore, only one event handler can be registered per event per element.

DOM Event Model:

1. Registration Events

AddEventListener () Method:

Syntax: AddEventListener ("type", Function,usecapture)

Parameter: Type: Is the type of event to bind, but there is no "on" prefix.

such as the OnClick event should be written: click

Function: Event handler, with a default argument, referencing the event object

Usrcapture: Is a Boolean value,

True: The response is triggered during the capture phase of the event propagation;

When false: The response is triggered during the bubbling phase of event propagation

Example: var btn = document.getelementsbytagname ("input") [0];

Btn.addeventlistener ("click", Function () {

btn.value = Event.type;

},true)

2. Event Propagation

In the DOM 2-level event model, once an event is triggered, the event stream is first propagated down from the top of the DOM tree (document node #document) until the target node is propagated upward from the target node to the top of the DOM tree.

The process from top to bottom is called the capture phase,

The process from bottom to top is called the bubbling phase.

Bubbling of the terminating event stream: Stoppropagegation () method

Example: var btn = document.getelementsbytagname ("input") [0];

do{

btn.addeventlistener ("click", Function () {

div.innerhtml + = "+this.nodename+" ";

},true)

btn = Btn.parentnode;

}while (BTN);

In the example above, the third parameter is set to True, and the capture-type event is registered.

So click the button and the event trigger order is: #document->html->body->button

If the third parameter is set to False, a bubbling event is registered.

So click on the button and the event's trigger order is:button->body->html-> #document

3. Destruction Events

RemoveEventListener () Method:

Note: The third parameter of RemoveEventListener () and AddEventListener () should be kept consistent

Otherwise, the destroy operation is not valid.

IE Event Model:

1. Registration Events:

Attachevent () Method:

Syntax: attachevent ("type", function)

Parameters: Type: element event types, such as: onclick

Function: Event handler

Note: In the IE time model, the this pointer in the event handler always points to the Window object,

In type 0 event model, the this pointer in the event handler always points to the object that is currently registering the event

2. Event Propagation:

IE Event Model: The event stream is always passed from the target object to the top of the tree, known as the bubbling type.

To terminate the bubbling of an event stream: Set the Cancelbubble property of the Events object

3. Logout Event:

DetachEvent () method

Event handling mechanism:

Event object:

When the event is triggered, the browser automatically creates an event object,

The event object is actually an instance of the event type,

By default, he is passed as a parameter to the event handler function.

To implement access compatibility:

var event = event| | window.event;

Note: The properties and methods of the event object returned by the IE and DOM standard browsers are different!!!