HTML+CSS+JavaScript

Vòng lặp

http://2ality.com/2011/04/iterating-over-arrays-and-objects-in.html

Properties

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/how-to-print-or-enumerate-properties-of-a-javascript-object

Self-Executing Anonymous functions

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write 

Tìm sự khác nhau

Is there any difference between:

(function(){
  return 'ooo';
})();

and

(function(){
  return 'ooo';
}());

Câu hỏi tại sao?

(function(window){
  var bar = function(){...return{...};};
  window.foo = bar;
})(window);
var baz = new bar(); //bar is not defined

Giải thích:

Check your code, you actually rename your function bar to foo.
Code should be:

(function(window){
  var bar = function(){...return{...};};
  window.foo = bar;
})(window);
//var baz = new bar(); //bar is not defined
var baz = new foo(); //foo is well defined!

Có lỗi không?

(function(mark, loves, drinking, coffee){
  mark.open('http://www.google.com'); //window
  loves.getElementById('menu'); //document
  drinking('#menu').hide(); //jQuery
  var foo;
  console.log(foo === coffee); //undefined
})(window, document, jQuery);

Tìm hiểu thêm event.bubbles

https://www.sitepoint.com/event-bubbling-javascript/

https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

https://javascript.info/bubbling-and-capturing

How to stop bubbling

Since all the browsers by default support event bubbling, it is sometimes useful to stop the event bubbling as a user might get confused when a single trigger on one element lead to multiple triggers on ancestors. So for the simple individual requirement where a user wants one event on one element, another on another, the bubbling of an event is not a necessity. To stop the event from bubbling up, user can use any of the following approaches:

1) stopPropagation(): This method stops the further propagation of any particular event to its parents, invoking only the event handler of the target element. Although supported by all W3C compliant browsers, this method doesn’t work with Internet Explorer version 9 or lesser.[6]

For IE<9, we can stop the bubbling using following code:

  event.cancelBubble=true;

For all the W3C compliant browsers:

  event.stopPropagation();

2) stopImmediatePropagation(): This method will not only stop the further propagation but also stops any other handler of the target event from executing. In DOM, we can have multiple handlers for the same event and they are independent of each other. So stopping the execution of one event handler generally doesn’t affect the other handlers of the same target. But stopImmediatePropagation() method prevents the execution of any other handler of the same target.[6]

For all the W3C compliant browsers:

  event.stopImmediatePropagation();

Ví dụ về DOMContentLoaded

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
for(var i=0; i<2000000000; i++) // wait for 5 seconds
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
</body>
</html>

Ví dụ hay về JavaScript Event Bubbling

https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing

http://jsfiddle.net/cwtuan/je1g3f29/16/

Bài viết tiếng Việt

https://viblo.asia/p/bubbling-va-capturing-event-trong-javascript-phan-1-m68Z0Nod5kG

https://viblo.asia/p/bubbling-va-capturing-event-trong-javascript-phan-2-bJzKmLnO59N

https://viblo.asia/p/dispatching-custom-events-in-javascript-bWrZnebwKxw

https://viblo.asia/p/12-thu-thuat-huu-ich-trong-javascript-3P0lPvVbKox

Tệp mẫu HTML

<!doctype html>
<html>
<head>
<title>event bubbling and event capturing</title>
<style>
form{border: solid green 1px;padding: 10px;}
div{border: solid yellow 1px;padding: 10px;}
p{border: solid red 1px;padding: 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
<script>
console.log('---------- Started ----------');
(function(){console.log('Hello World!')})();
console.log('---------- continue ----------');
(function(mark, loves, drinking, coffee){
mark.open('http://www.google.com'); //window
loves.getElementById('menu'); //document
drinking('#menu').hide(); //jQuery
var foo;
console.log(foo === coffee); //undefined
})(window, document, jQuery);
console.log('---------- continue ----------');
for(let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
}
console.log('---------- continue ----------');
var fruits = ["Banana", null, "", "Orange", "Apple", "Mango"];
fruits.forEach(function(value){
console.log(value);
});
console.log('---------- continue ----------');
fruits.every(function(elem) {
if (elem && elem.length === 0) {
return false; // break
}
console.log(elem);
return true; // don’t forget!
});
console.log('---------- continue ----------');
fruits.every(function(elem) {
if (elem && elem.length !== 0) {
console.log(elem);
}
return true; // don’t forget!
});
var nyc = {
fullName: "New York City",
mayor: "Michael Bloomberg",
population: 8000000,
boroughs: 5
};
var cat = {
name : 'foo',
age : 12,
canRun : function(){
console.log("can run");
}
};
console.log('---------- continue ----------');
console.log(Object.values(cat));
console.log('---------- continue ----------');
console.log(Object.keys(cat));
console.log('---------- continue ----------');
for (var prop in cat) {
console.log(prop);
}
console.log('---------- continue ----------');
for (var prop in nyc) {
console.log(prop);
console.log(nyc[prop]);
}
console.log('---------- Finished ----------');
</script>
</head>
<body>
<form>
<div>
<p>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"></image>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
</div>
</form>
</body>
</html>