Web Front-end learning notes and practices (9) Native Javascript

event stream:

    HTML  >    head  >  head  >    body  >    Div  >  Div  >    body  >    HTML  > 

I. Event bubbling:

If you click Div, the initial vertex of the event is defined by div-> body-> HTML-> Document Object. This mode is called event bubbling. The Internet Explorer supports this mode and Firefox Chrome safari, but these three browsers are slightly different from IE, and they all bubble up on the window object.

Ii. Event Capture:

In, if you click Div, the initial point of the event starts with the document object. The Document Object-> HTML-> body-Div is called event capture. It is mainly supported by the Firefox Chrome safari Opera Browser.

3. dom2 events:

In, if you click Div, the actual target will not receive the event in the capture phase, and it will be stopped at this phase by document-> HTML-> body. Then, an event is triggered on the target of the DIV, And the div-> body-HTML-Document Object is returned. [Firefox chrom safari Opera support, but IE does not .]

 

Actual phase:

We often use several methods during development. One is embedded in the HTML structure, the other is to execute events through an anonymous function, and the third is to process events.ProgramAdd events.

First: Events in the HTML structure:

 <  Html  >     <  Head  > </  Head  >     < Body  >        <  Div  Onclick  = "Script Function"  ;  > </  Div  >     </  Body  >  </  Html  > 

Type 2: anonymous Functions

Function () {var A = Document. getelementbyid ("D"); A. onclick = function () {execution function }}
 

Third: add an event to the event handler

 
FunctionDe (){VaRA = Document. getelementbyid (""); A. addeventlistener ("Click ",Function() {Execution function },False);}
 

Of course, since you can add events, you can also remove events by removeeventlistener ().

VaRA = Document. getelementbyid ("");VaRB =Function() {Execution function}//Add eventA. addeventlistener ("click", B,False);//Remove eventA. removeeventlistener ("click", B,False);
 

Experience: when adding an event, it is best to use a variable to receive the content you need to execute and use an anonymous function. Otherwise, an error will be reported when you remove the event.

VaRA = Document. getelemetbyid (""); A. addeventlistener ("Click ",Function() {Function body },False); A. removeeventlistener ("Click ",Function() {Function body },False);//Error. invalid.
 

When you use an event to add an event to a program, ie is somewhat different from other browsers. The method is as follows:

VaRA = Document. getelementbyid ("");VaRB =Function() {Function body}//Add eventA. attachevent ("onclick", B );//Remove eventA. detachevent ("onclick", B );
 

In the IE event, the specific event parameters must use parameters in the HTML event, such as onclick. In other browsers, click.

There is also an event object in the entire event model. Its main function is to provide all information containing the event, such as what event is this, onclick? This stuff is a bit important. The following are some of its attributes:

 bubbles ///   whether the event is bubbling  cancelable ///   whether to cancel the default event behavior  currenttarget  //   the element that the event handler is processing  detail ///   event-related details  eventphase  //   event handler stage, 1, 2, 3  preventdefault ()  //   cancel the default event behavior  stoppropagation () ///   cancel event capture or bubble  Target  //   event Target  type ///   event type  View ///   event-related abstract view  

The following is an example:

  var  A = document. getelementbyid ("A" );  ///   anonymous Function Method . onclick =  function   (event) {alert (event. type);   //   the event type is onclick event  } ///   the event handler is not added to IE . addeventlistener ("click",  function   (Event) {alert (event. type) ;},  false   );   //   ie mode . attachevent ("onclick",  function   (Event) {alert (event. type) ;});  

All of the above are mouse events. Since there are mouse events, there are only Keyboard Events, most of which can be used in actual development, and of course some special people need to use them. Keydown keypress

Keyup. Keydown is triggered when you press any key on the keyboard, keypress is triggered when you press the character key on the keyboard, keyup is triggered when you release the keyboard key. In the keyboard, each key has a corresponding key code. In fact, we need to operate on these key codes. The specific key code also needs to be searched by friends who actually use it.

Event Delegate:

In event delegation, it is often used to add event handlers at the highest possible level in the DOM tree of the target element. For example:

 
<UlID= ""></Ul>
 

  var  listevent = document. getelementbyid ("A" )   var  eventall =  function   (event) {  switch   (event. type) {  case  "click" : alert ( 1 );   Break  ;  case " Mouseover ": Alert ( 2 );   Break   ;}} listevent. onclick  =  eventall; listevent. onmouseover  = eventall; 

Of course, if there is Li in UL, it is necessary to match the ID in Li each time and then make the corresponding event.