JavaScript Event Model

I. Flow of events

The event flow means that more than one element on the page can have the same event. Logically, each element must be able to respond to events in the specified order. The sequence of events is the main difference between the events supported in IE4.0 and Netscapte4.0.

1. Event bubbling

For IE, the solution is to use event bubbling technology. The basic idea is that the event starts at the very beginning of the event's target and fires up to the most external (document object).

If you click the div element in IE5.5, the event bubbles in the following order:

1) <div/>

2) .<body/>

3) Document

2. Event Capture

Event capture is just the opposite of bubbling, which is the event firing order from the outermost object (the Document object) to the innermost object. Event capture can also be a window-level event, but requires the developer to display the specified. Netscape Navigator also cannot handle events for all elements on the page.

If you click the div element in netscape4.x, the event is triggered as follows:

1) Document

2) Div

3.DOM Event Stream

The DOM supports both event capture and event bubbling, but event capture occurs first. Two event streams can traverse all objects in the DOM, starting and ending points as document objects.

Because the event target (div element) is the innermost element (the deepest of the DOM tree), it actually accepts events two times in a row: one at the capture stage, and one in the bubbling phase.

One feature of the DOM event model is that text nodes can also trigger events (ie does not work).

Ii. Event Handlers/listeners

An event is a behavior that is performed by the user or by the browser. These events are named click, Load, MouseOver, and so on. A function that is called in response to an event is called an event handler (the DOM is called an event listener). The function that responds to the Click event is called the onclick event handler. There are two ways to assign an event handler: One is the traditional event handler assignment method, supported by all browsers, and one that is assigned to modern event handling, and is supported only by modern browsers.

1) Traditional event handler assignment method

The traditional event handler assignment method assigns an event handler to an event in one of two ways: in JS or in HTML.

A Specifying an event handler in JS

Example: Var V=document.getelementbyid ("Div1");

V.onclick=funtion () {

Alert ("I was ordered")

}

When using existing functions, you should be aware that:

1) When you bind an event handler to an event property, you can only refer to the name of the function, which cannot be appended with parentheses.

2) Regardless of how the function is defined, you must ensure that the event handler is enlisted before the XHTML element is added to the DOM.

B. Specify in the event handling properties of the HTML tag

If you want to assign an event handler in XHTML, you only need to add an event-handling property to the HTML tag and use the appropriate script code as the property value.

Example: <div onclick= "alert (' I was clicked ')" ></div>

It is important to note that in HTML, the name of the event handler must be all lowercase letters, regardless of the type of assignment that is taken.

3) Modern event handler assignment method

1) IE browser

In IE, there are two methods for each element and window object: Attachevent () and DetachEvent (). Attachevent () is used to bind a handler to an event, and detachevent () is used to unbind the event handler. Both methods have two parameters: the name of the event handler to assign (for example, onclick), and the name of the function. Its syntax format is:

[Object].attachevent ("Name of event handler", "function");

[Object].detachevent ("Name of event handler", "function");

2) DOM

The DOM uses the AddEventListener () and RemoveEventListener () methods to complete the task assigned and deleted by the event handler. The two methods have three parameters, namely the name of the event, the function to be assigned, whether the handler is to be used in the bubbling or capturing phase. If the handler is to be used in the capture phase, the third parameter is set to True, and if it is used in the bubbling phase, this parameter is set to False. Its general syntax:

[Object]. AddEventListener ("Event name", function name, bcapture)

[Object]. RemoveEventListener ("Event name", function name, bcapture)

3) Resolution of compatibility issues

To ensure that the code is available under IE and Dom Browser, use the following code to resolve:

If (Docement.addeventlistener) {

V. AddEventListener ("click", Fnclick1,true);

V.addeventlistener ("click", Fnclick2,true);

}else if (

Document.attachevent) {

V.attachevent ("onclick", fnClick1);

V.attachevent ("onclick", FnClick2);

}

Third, the return value of the event handler

To cancel the default behavior of an event, you can return a false value from its time handler. When a form's submit handler returns false, the form's submission is canceled. Similarly, returns false in a linked click event handler that will organize the browser to mount the target link.

click--the radio button and check box to cancel the setting. For the Submit button, the form submission is canceled. For the reset button, the form is not reset. For links, link destinations are not loaded.

• dragdrop--Remove Drag.
• keydown--cancels the subsequent KeyPress event when the user presses and holds the key.
• keypress--cancels the KeyPress event.
• mosedown--cancels the default behavior (start of drag, start of selection, unlink).
• mouseover--causes changes to the status or Defaultstatus property of the window to be ignored by the browser. submit--Cancel form submission.

Iv. Event Object

The developer of the browser creates an event object that contains specific information when the event occurs, including:

1) The object that triggered the event

2) mouse information when an event occurs

3) keyboard information when an event occurs

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.

1) Positioning

In Internet Explorer, the event object is a property of the Window object.

Example: V.onclick=function () {

Var v1=window.event

}

The DOM standard specifies that the event object can only be passed to the handler as the only parameter.

Example: V.onclick=function () {

Var V1=arguments[0];

}

Ways to determine Browser type:

if (window.event) {//judgment is not IE browser

document.getElementById ("P1"). innerhtml= "IE";

}

Else if (oevent) {//judgment is not Dom browser

document.getElementById ("P1"). innerhtml= "DOM";

}

2) Properties and methods

Properties and methods of the event object for IE browser

Button,cancelbubble,clientx,cliety,ctrlkey,fromelement,keycode,offsetx,offset,repeat,returnvalue,screenx, Screen,shiftkey,srcelement,toelement,type,x,y.

Properties and methods of the event object for the DOM

Altkey,bubbles,button,cancelable,cancelbubble,charcode,clientx,clicenty,ctrlkey,currenttarget,detail, Eventphase,ischar,keycode,metakey,pagex,pagey,preventdefault (), Relatedtarget,screenx,screeny,shiftkey, Stoppropagation (), Target,timestamp,type.

3) Same point

1) Get Event type

The same code can be used in both types of browsers:

Var Stype=oevent.type;

2) Get keyboard code (Leydown/keyup event)

During the KeyDown or KeyUp event, you can use the KeyCode property to get the key code

Var Ikeycode=oevent.keycode;

3) Detection Shift,alt,ctrl

The same approach is used to detect whether the shift, ALT, or CTRL key is pressed:

Var Shift=oevent.shiftkey;

Var Alt=oevent.altkey;

Vat Ctrl=oevent.ctrlkey;

4) Get customer area coordinates

During mouse events, the Clientx and Clienty properties allow you to get the mouse pointer relative to the customer

5) Get screen coordinates

During mouse events, you can get the position of the mouse pointer relative to the computer screen through the Screenx and Screeny properties:

Var Iscreenx=oevent.screenx;

Var Iscreeny=event.screeny;

4) different points

1) Get the target

In IE, the target is contained in the Srcelement property of the event object:

Var otargrt=oevent.srcelement;

In the Dom browser, the target is contained in the target property:

Var Otargrt=oevent.target;

2) Get character code

The KeyCode property of IE returns the character code.

Example: Var Icharcode=oevent.keycode;

In the Dom browser, the key code and the character code are separated. To get the character code, you must use the CharCode property:

Var Icharcode=oevent.charcode;

Var Schar=string.fromcharcode (Oevent.charcode);

3) default behavior of block time

In IE, to block the default event behavior, you must set the ReturnValue property to False:

Oevent.returnvalue=fals;

In the Dom browser, the Preventdefault () method is called:

Oevent.preventdefault ();

4) Abort event propagation (bubbling)

In IE, you must set the Cancelbubble property to True:

Oevent.cancelbubble=true;

In the DOM, just call the Stoppropagation () method:

Oevent.stoppropagation ();

V. Types of events

Events that occur in the browser can be grouped into several specific types, depending on the object that triggered the event and the behavior triggered by the event. Several event groups are defined in the DOM specification:

Mouse events-triggers mouse events when a user executes a task with the mouse.

Keyboard events-Trigger keyboard events when the user is typing on the keyboard.

HTML events-Penalties for HTML events when the browser window or a specific client server interaction changes.

1. Mouse events

Click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove.

1) Event Properties:

• For each mouse event, the property is populated with the event object:
• Coordinate properties
• Type property
• Taget or Srcelement Property
• Shiftkey,ctrkey,altkey,metakey Property
• Button Property

Order of event Occurrence

On the same target, the MouseDown and MouseUp events occur sequentially before the Click event is triggered.

1.mousedown2.mouseup3.click4.mousedown5.mouseup6.click7.dbclick

2. Keyboard events

Keyboard events occur when the user uses the keyboard, including:

• Keydown: Occurs when a user presses a key on the keyboard. Repeat occurs if you press and hold it.
• Keypress: Occurs when the user presses a character key (excluding shift and CTRL) on the keyboard. Repeat occurs if you press and hold it.
• Keyup: Occurs when the user releases a pressed key.

Event Properties:

• KeyCode Property
• CharCode Property (DOM)
• Target (DOM) or srcelement (IE) Properties
• Shiftkey,ctrkey,altkey and Metakey (DOM) Properties

The sequence of events occurs:

The order in which the event occurs when the user presses a character key one time:

1. KeyDown
2. KeyPress
3. KeyUp

The order in which the event occurs when the user presses a non-character key one time:

1. KeyDown
2. KeyUp

3.HTML Events

• Load event--in the window, when the page is all loaded;
• Unload event--in the window, when the page is completely unloaded;
• Abort event--in the object element, if it has not been fully loaded before the user aborts the loading process;
• Error event--in the window, when a JS error occurs;
• Select Event--triggered when the user selects one or more characters in a text box;
• Change Event--In a text box, when it loses focus and its value is changed;
• Submit event--When the submit button for the form is clicked;
• Reset event--When the reset button for the form is clicked;
• Resize event-when the window or frame size is adjusted;
• Scroll Event--when there are any elements that the user scrolls with the scroll bar;
• Focus Event--when any element or window receives focus;
• Blur Event--when any element or window loses focus;

JavaScript Event Model