JavaScript Event Model

Event Flow

Event bubbling

For the event stream, IE uses event bubbling technology. The basic idea is that the event is triggered from the very inside of the event and is triggered up to the most external (document object).

Event capture

Event trapping is exactly the opposite of event bubbling, and its event firing order is from the outermost object (document) to the innermost object.

Dom Event Flow

The DOM is supported for both event capture and event bubbling, but event capture occurs first. All two events can traverse all code objects in the DOM, starting and ending with document (many quasi-compatible browsers can always capture/bubble to the Window object). The text node in the DOM event stream can also receive events.

Event Handlers/Listeners

There are two ways to assign an event handler:

1. Traditional Event handling assignment method, you can assign an event handler to an event that is supported by all browsers.

2. Modern event handler assignment methods that can assign multiple event handlers to an event, are supported only by modern browsers, and have problems with browser incompatibility.

Traditional method of assigning event handlers

1. Assign an event handler to an event in javaScript/in HTML.

2. specified in the XHTML tag Event processing property.

<div> onclick="alert (' I've been clicked ')"</div>

Methods of assigning modern event handlers

1. for IE browser

In IE, there are two methods for each element and window object:

A. attachevent () binds an event handler to an event.

B. DetachEvent () is used to unbind the event handler.

[Object].attcahevent (" event name" , function );

[Object].detachevent (" event name" , function );

Var odiv = document.getelementbyidx_x ("div1");

Odiv.attachevent ("onclick", Fnclick); to add an event handler

Odiv. DetachEvent ("onclick", Fnclick); to delete an event handler

2. for DOM-compatible browsers

AddEventListener () assignment of event handlers

Removeeventlistenter () Delete task for event handler

Both of these methods have three parameters:

is the name of the event, the function to be assigned, whether the handler is using the bubbling /capturing phase (true for the capture phase , False for the bubbling phase)

[Object].addeventlistener (" event name" , function name , bcaptrue);

[Object]. Removeeventlistenter (" event name" , function name , bcaptrue);

Odiv.addeventlistener ("click" , Fnclick, false); event handlers for the bubbling phase

Odiv. Removeeventlistenter ("click" , Fnclick, false);

Note: The same event handler assignment and deletion, their bcaptrue must be the same, if not the same, it will delete the failure, but will not error.

3. resolution of compatibility issues

Because of the different ways in which modern event handlers are assigned under IE and DOM, we can assign event handlers (two copies) to each event in one of two ways.

Var fnlick1 = function () {alert (" I was clicked");};

Var Fnlick2 = function () {alert (" I was also clicked");};

If (Document.addelementlistener) {//For IE browser

Odiv.addeventlistener ("click" , Fnlick1, true);

Odiv.addeventlistener ("click" , Fnlick2, true);

}else if (document.attachevent) {//For Dom browser

Odiv.attachevent ( "onclick" , fnlick1);

Odiv.attachevent ( "onclick" , Fnlick2);

}

The return value of the event handler

Event Object

The browser developer creates an event object that contains specific information about the time the event occurred, including:

The object that triggered the event

Mouse information When an event occurs

keyboard information When an event occurs

Positioning

In IE , the event object is a property of the Window object. The event handler must be accessed in the following way:

Odiv.onclick = function () {

var oevent = window.event;

}

After all events have been executed, the event object is destroyed.

In the DOM, it is stated that the event object can only be passed as the only parameter to a handler, so it must be:

Odiv.onclick = function () {

Var.oevent = Arguments[0];

}

You can also:

Odiv.onclick = function (oevent) {

}

In order to properly use the event object, we must first determine whether the browser is IE or a DOM-compatible browser:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

<title> Test Browser </title>

<script type= "Text/javascript" >

function BrowserType (oevent) {

if (window.event) {

Document.getelementbyidx_x ("P1"). InnerHTML = "IE browser";

}else if (oevent) {

Document.getelementbyidx_x ("P1"). InnerHTML = "Dom browser";

}

}

function test (oevent) {

Alert (String.fromCharCode (Oevent.keycode));

}

</script>

<body >

<!--<p onclick= "BrowserType (event); >hello, JavaScript Event object</p>

<p id= "P1" > What browser is it </p>-->

<div align= "center" > Only for testing <input type= "text" id= "I1" onkeydown= "Test (event);"/></div>

</body>

Properties and Methods

Same point:

Although there are many incompatibilities between IE and DOM-compatible browsers, there are some similarities.

Get Event Type:

Var stype = Oevent.type;

Get the keyboard code:

Var Ikeycode = Oevent.keycode;

Detect shift, ALT, CTRL or not:

Oevent.shiftkey;

Oevent.altkey;

Oevent.ctrlkey;

They return a Boolean value that also triggers a KeyDown event that can get its keycode value.

Get Customer Area coordinates:

Oevent.clientx; X-coordinate

Oevent.clienty; Y-coordinate

Get screen coordinates:

That is, the position of the mouse relative to the screen.

Oevent.screenx; Mouse x coordinate

Oevent.screeny; Mouse y-coordinate

Different points:

Ie:

Get Target oevent.srcelement;

Get character code Oevent.charcode;

Default behavior for blocking events Oevent.returnvalue = false;

Abort Event Propagation oevent.cancelbubble = true;

Dom:

Get Target oevent.target;

Get character code Oevent.charcode;

The default behavior of the Block event Oevent.preventdefault ();

Abort event Propagation oevent.stoppropagation ();

Event Type

Mouse events

Click/enter Click events

Dblclick Double-click event

Mousedown Press any mouse button

Mouseout Mouse Move out

Mouseover Mouse over

Mouseup Mouse Release

Mousemove This event occurs repeatedly when the cursor is over an element

Keyboard events

Keydown Press a key, press and hold to repeat the occurrence

Keypress Press a key, press and hold to repeat the occurrence, do not include shift, ALT, CTRL and so on.

Keyup release a pressed key

HTML events

Load page is fully loaded

Unload page is all uninstalled

The abort user terminates the mount process before it has been fully loaded to trigger this event

Error JavaScript errors/page cannot be triggered by normal load for this event

Select triggers this event when a user selects one or more characters in a text box

This event is triggered when the change loses focus and the value is changed

Submit button is clicked when submitting a form

Reset button is clicked when resetting the form

Resize window /frame dimensions are adjusted

Scroll Scrolling Page

Focus gets the spotlight

Blur loses focus

Summarize:

An event is the behavior that occurs when a user or browser operates a webpage.

The event flow is the order of the corresponding events for the elements on the Web page.

Event streams differ in different kinds of browsers. In IE , event bubbling is used, and in netscapte Navigator4.0 , event capture is used, and in accordance with the standard DOM Compatible browsers, with the first capture after bubbling.

A function that is called in response to an event is called an event handler. An event handler is specified in one of two ways: in JavaScript or in HTML .

the event object is created only when events occur and can be accessed by an event handler. After all event handlers have been executed, The event object is destroyed.

Events that occur in the browser can be grouped into groups of events, such as mouse events, keyboard events,HTML events, and so on, based on the object that triggered the event and the behavior triggered by the event .

JavaScript Event Model