frond end 总结

最新推荐文章于 2024-07-25 11:38:28 发布

转载最新推荐文章于 2024-07-25 11:38:28 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leetcode/p/3165349.html

problems with prototypes.

all instance get the same property values by default.
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)
}

转载于:https://www.cnblogs.com/leetcode/p/3165349.html