[Javascript Summary] javascript's IE event and DOM event model, javascriptdom

[Javascript Summary] javascript's IE event and DOM event model, javascriptdom
Common event model 1. Binding on HTML pages

<Button id = "button" onclick = "function ();"> button </button>

2. Bind events to the javascript script file for processing

document.getElementById('button').onclick = function;

Event Model 1 in IE. Use script for binding (this binding is rarely used)

<Script for = "btn1" event = "onclick" type = "text/javascript"> alert ("You clicked me"); </script>,

2. Use the attachEvent method to bind

Document. getElementById ('btn1 '). attachEvent ("onclick", test); // If the id is btn1, the binding event is triggered;

DOM event model

Use addEventListener ("Event", call the function, which stage of event propagation (true/false ))
If it is true, it indicates the listening capture phase, and false indicates the listening bubble phase.

Document. getElementById ('btn1 '). addEventListener ("click", test, true); // The event is bound to a button with the id btn1. clicking the button triggers the test function and only listens to its capture phase;

Access event object:

• The IE event object is an implicit Global Object. when the event occurs, this object is created. The secondary object has many attributes.
• Unlike the IE event model, the DOM event model automatically creates an event object and implicitly uses this object as the first parameter of the event processing function.

In addition, there is event bubbling in IE:

Event. cancelBubble = true; // cancel the event bubble of IE. The default value is false.

IE redirection event (event forwarding );

Document. getElementById ('btn1 '). fireEvent ("onCliclk", event) // send the event to the button with the ID btn1.

Capture events

Target. setCapture (); // sets the target object capture modification time target. releaseCapture (); // sets the target object release capture.

DOM Event Propagation

DOM model events are successively transmitted in two directions. The first stage is the event capture stage, from the top-level object to the target object where the event occurs. The second stage is the bubble stage, where the event target object is propagated up to the top-level object;

Event. stopPropagation () // resistance event Propagation

Cancel default behavior

event.preventDefault（）；