January 25th 2018
Hello! At the JavaScript_30days course we talked about events and event listeners, and rather learned about event probation and bubbling. When for example we have three divs nested in each other, and we add and event listener to theses divs, when clicked on the inner most one, it will console log all the divs starting from the innermost one to the upper one all the way to the body, html, and window.
When listening to multiple nested elements, it will trigger a click on all elemenents. What happens here is something called bubbling, the click has a ripple effect it goes up to all the elements around the one clicked on. But actually first something else happens which is capture. After clicking the browser the browser will capture first, and it will ripple down. After it will bubble up. If in the eventListener we add an argument capture:true will capture the events in the first way, and it won’t bubble.
divs.forEach(div => div.addEventListener('click', logText, {
capture:false
capture:true
}));
of a button, it lets the event happen only once. And by writing e.stopPropagation(); in the code the bubbling will stop.
In the CSS grid course we looked at sizing and placing grid items. Fixed width of an element will stretch all the other elements in the same column, if we have an fr unit. With span an element can span longer than its original width and push the next element away. If the span is longer than the number of columns we set it will add implicit columns.
grid-colum: 1 / 2 or span 3 /5 - we can tell where to start and how long to be.
grid-colum: 1 / -1 -the elements will span the whole length
At the Web Development Bootcamp I continued my lessons with JavaScript Objects and did interesting exercises about how to loop over an object.
Cheers!