HTML+CSS+JavaScript
Vòng lặp
http://2ality.com/2011/04/iterating-over-arrays-and-objects-in.html
Properties
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>
