Native JS Summary

1.JS basic data Type

Number string Boolean underfined null

2. find specific elements in a document

document.getElementById ("id");

Document.getelementbytagname ("div");

Document.getelementbyclassname ("AA"); have compatibility issues

Document.getelementbyname ("username"); have compatibility issues

3. Timers

SetTimeout (function () {

Execute code

},time); Time is timed for a few seconds

4.JS Get block element width high

var odiv = document.getElementById ("id"); Get element ID

Odiv.offsetwidth//offsetwidth = content + padding + border

Odiv.offsetheight

Odiv.offsetleft

Odiv.offsettop

Odiv.offsetparent

5. event bubbling and event capture

Event bubbling: Starting with triggered events, bottom-up triggering events, default to False//I---dad--Grandpa

Event capture: From document to node triggering event, top-down trigger event, third parameter is true//grandpa----dad--I

Then, on the code

Html:

1 <  ID= "Div1">2       <id= "Div2 "  class=" Div2 ">34       </Div  >5     </div>

Js:

Event bubbling (Result: Div1 div2)

1 var oDiv1 = document.getElementById ("Div1"); 2     var oDiv2 = document.getElementById ("Div2"); 3     odiv1.addeventlistener ("click", Function () {4      alert ("Div1 triggered"); 5     }); 6     odiv2.addeventlistener ("click", Function () {7      alert ("div2 triggered"); 8     });

Event Capture (Result: Div2 div1)

1   var oDiv1 = document.getElementById ("Div1"); 2     var oDiv2 = document.getElementById ("Div2"); 3     odiv1.addeventlistener ("click", Function () {4      alert ("Div1 triggered"); 5     }); 6     odiv2.addeventlistener ("click", Function () {7      alert ("div2 triggered"); 8     },true);

PS: a function that blocks event bubbling:

Jq:e.stoppropagation can be implemented until the currently triggered element, no longer bubbling up

Native JS Summary