Event events in JavaScript

I. Flow of events

1. Event Flow: Describes the order in which events are accepted from the page

The event stream of IE is the event bubbling stream, and the Netscape event stream is the event capture stream.

2. Event bubbling

The event stream of IE is called event bubbing, that is, when the event starts, it is accepted by the specific element, and then propagates up to the less specific node. If you click Div. The event flow is as follows

Div--body-to-HTML-body

The process of event bubbling

3. Event Capture

The event stream presented by Netscape is event capturing, that is, the less specific node receives the event earlier and then passes it down, and the specific node finally receives the event. If you click the div, the event flow is as follows

Body--> HTML--Body-->div

4. Dom Event Flow

The event flow defined at the DOM2 level consists of three phases: the event capture phase, the target stage, and the event capture phase.

The event stream is passed as follows

Ii. Event Handling (handler)

1. An event listener or event handler, a function that responds to an event, whose name begins with "on".

2, DOM0 level of event handler

Each element, including Window,document, has its own event handler property, which is usually all lowercase, and the property is set to a function to specify the handler function.

var btn = document.getElementById (' mybtn ');

Btn.onclick = function () {

alert (this.id); ' Mybtn '

}

Note: The This object in the event references the current element to access all the properties and methods of the element.

3, DOM2 level of event handler

2 methods are defined to specify and delete event handlers: Addeventlistener,removeeventlistener.

Btn.addeventlistener (name, handler, capture);

Btn.removeeventlistener (name, handler, capture);

The two methods accept three parameters:

Name Event name,

Handler event handler function,

Whether capture calls handler in the capture phase; true, false is called at the bubbling Stage handler

Note: Event handlers added through AddEventListener can only be removed using RemoveEventListener.

4, the event handler in IE

There are two methods implemented in IE: Attachevent, DetachEvent.

Attachevent (' On ' +name, handler);

DetachEvent (' On ' +name, handler);

When multiple events are added to an element, the order in which they are triggered is reversed.

Note: When using the DOM0-level method, the event handler runs at the scope of its owning element, and when the Attachevent method is used, the event handler runs under the global scope. That

Btn.attachevent (' onclick ', function () {

Alert (This = = = window); = True

})

5. Cross-browser event handlers

See Code Eventutils

Third, the event object

When an event is triggered on the DOM, an object containing all information about the event is generated.

1. Event objects in the DOM

An event will have properties:

Bubbles	Boolean	Read-only	Whether the event bubbles
Cancelable	Boolean	Read-only	Whether the event default behavior can be canceled
Currenttarget	Element	Read-only	The element that the handler is now working on
Detail	Integer	Read-only	Event-specific details
Preventdefault	Function	Read-only	Cancels the default behavior of the event. Cancelable is available for true.
Stoppropagation	Function	Read-only	Block event capture or bubbling. Bubbles is true available
Target	Element	Read-only	The target element of the event
Trusted	Boolean	Read-only	True indicates that the browser was generated, and false is created for the developer
Type	String	Read-only	Event Type
Eventphase	Integer	Read-only	The stage of the event: 1 capture phase; 2 in target; 3 bubbling Stage

2, the event object in IE

There are several different ways to access event objects in IE:

1) events added using the DOM0-level method, the event object exists as a property of the Window object. Use Window.event.

2) The event object can be accessed through the events variable by using HTML attributes.

The event object includes the following properties and methods

Cancelbubble	Boolean	Read-only	The default is False, which prevents event bubbling when true
ReturnValue	Boolean	Read-only	Default is TRUE to block default event behavior when False
Srcelement	Element	Read-only	Event target, same as target property in Dom
Type	String	Read-only

The first part of the Event is briefly introduced here, and subsequent updates to the study notes are available. Thanks for watching!!

Event events in JavaScript