frond end 总结

problems with prototypes.

  1. all instance get the same property values by default.
  2. the main problem comes with their shared nature for example : person1.friends array push a new stuff.   person2.frend also change.

 

 

constructor vs instance vs prototype 

each constructor has a prototype object that points back to the constructor and instances have an internal pointer to the prototype.

 

 

inheritance using prototype chaining.

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

};

function SubType(){

this.subproperty = false;

}

//inherit from SuperType

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue()); //true

 

The HTML DOM (Document Object Model)

  • Finding HTML elements by id          var x = document.getElementById("main").
  • Finding HTML elements by tag name    var y = x.getElementsByTagName("p").  y[0].innerHTML
  • Finding HTML elements by class name   Finding elements by class name does not work in Internet Explorer 5,6,7, and 8.

 

 

event Bubbling and capturing

http://javascript.info/tutorial/bubbling-and-capturing

Bubbling,   d3->d2->d1

After an event triggers on the deepest possible element, it then triggers on parents in nesting order.

<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css">

<div class="d1">1  <!-- the topmost -->
    <div class="d2">2
        <div class="d3">3 <!-- the innermost -->
        </div> 
    </div>
</div>

</body>
</html>

Capturing

1->2->3  need to use the addEventListener method.

All methods of event handling ignore the caputiring phase. Using addEventListener with last argumenttrue is only the way to catch the event at capturing

elem.addEventListener( type, handler, phase )

 

phase = true
The handler is set on the capturing phase.
phase = false
The handler is set on the bubbling phase.
1->2->3
var divs = document.getElementsByTagName('div')

for(var i=0; i<divs.length; i++) {
  divs[i].addEventListener("click", highlightThis, true)
}

   1->2->3->3->2->1

var divs = document.getElementsByTagName('div')

for(var i=0; i<divs.length; i++) {
  divs[i].addEventListener("click", highlightThis, true)
  divs[i].addEventListener("click", highlightThis, false)
}

 

 

 

 

 

posted on 2013-07-01 18:42  brave_bo  阅读(178)  评论(0)    收藏  举报

导航