2 Ekim 2015 Cuma

What is "Event Bubbling" in JS?

When an event is occured, this event reaches root of DOM tree.

For example, imagine that there are two DOM element that has click events. If child element is clicked, then event of parent element is also fired.

To prevent this, use properties or methods of event object of child element.

* Here is process that shows an element during event bubbling;
--------------------------------------------------------------------------
 $("p").click( function(event) {
      alert ( event.currentTarget === this ); // returns true!
 });
--------------------------------------------------------------------------

* The code below prevents "Event Bubbling” that is defined above.
It keeps the event happened in child element out of parent elements.
--------------------------------------------------------------------------
$("p").click( function(event) {
     event.stopPropagation();
     // Do smth.
});
--------------------------------------------------------------------------

References: 
1) http://ulviercan.com/teknoblog/jquery/jquery-ve-olaylar-events/
2) http://www.kazimsoylu.com/javascript/event-bubbling-javascript.html
3) http://javascript.info/tutorial/bubbling-and-capturing

What is the CSS feature - "box-sizing"?

For W3C, width and height values contain only content area. Padding and border values are not contained by these values. Most browsers use this standart.

However, IE6 and previous versions of IE6 accept such a rule that width and height values contain not only content area, but also padding and border values.

Because of this, W3C creates a feature in css to give a chance to user for selection of box-sizing type;

Structure : box-sizing: <value>
Values : content-box | border-box
Default value: content-box
Applicable elements: All elements
Inheritence: No

References: 
1) https://css-tricks.com/box-sizing/
2) http://fatihhayrioglu.com/css3-box-sizing-ozelligi/
3) http://www.w3schools.com/cssref/css3_pr_box-sizing.asp