1) Event Bubbling:
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
The concept of event bubbling is used where the event handlers are invoked when one element is nested on to the other element and are part of the same event. We can understand event bubbling as a sequence of calling the event handlers when one element is nested in another element, and both the
elements have registered listeners for the same event. So beginning from the deepest element to its parents covering all its ancestors on the way to top from bottom, calling is performed.
<div id="p2">
<div id="p1">
<button id="c1">I am a child button</button>
</div>
</div>
<script>
let grandparent = document.getElementById("p2");
grandparent.addEventListener("click", function(){
console.log("Grand Parent is invoked");
});
let parent = document.getElementById("p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
});
let child = document.getElementById("c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
});
</script>
This happens in the console when the above button is clicked.
If one element in hierarchy does not have the specified event handler.
<div id="p2">
<div id="p1">
<button id="c1">I am a child button</button>
</div>
<div id="p3">
</div>
</div>
<script>
let grandparent = document.getElementById("p2");
grandparent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
});
// let parent1 = document.getElementById("p1");
// parent1.addEventListener("click", function() {
// console.log("Parent 1 is invoked");
// });
// let parent3 = document.getElementById("p3");
// parent3.addEventListener("click", function() {
// console.log("Parent 3 is invoked");
// });
let child = document.getElementById("c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
});
</script>
This gets printed in the console when the above button is clicked.
2) Stopping Bubbling:
Beginning from the target and moving towards the top is the bubbling i.e. starting from the child to its parent, it moves straight upwards. But a handler can also take the decision to stop the bubbling when the event has been processed completely. In JavaScript, we use the event.stopPropagation () method.
Note: The event.stopPropagation () method stops the move upwards bubbling (on one event only), but all the other handlers still run on the current element.
<div id="p2">
<div id="p1">
<button id="c1" onclick="event.stopPropagation()">I am a child button</button>
</div>
</div>
<script>
let grandParent = document.querySelector("#p2");
grandParent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
});
let parent = document.querySelector("#p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
});
let child = document.querySelector("#c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
});
</script>
This gets printed in the console when the above button is clicked.
<div id="p2">
<div id="p1" onclick="event.stopPropagation()">
<button id="c1">I am a child button</button>
</div>
</div>
<script>
let grandParent = document.querySelector("#p2");
grandParent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
});
let parent = document.querySelector("#p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
});
let child = document.querySelector("#c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
});
</script>
This gets printed in the console when the above button is clicked.
In order to stop the bubbling and also prevent the handlers from running on the current element, we can use the event.stopImmediatePropagation () method. It is another method that stops the bubbling and execution of all the other handlers. It means if an element has more than one event handler on a single event, all the event handlers bubbling will get stopped using this event.stopImmediatePropagation () method.<div id="p2">
<div id="p1">
<button id="c1" onclick="event.stopImmediatePropagation()">I am a child button</button>
</div>
</div>
<script>
let grandParent = document.querySelector("#p2");
grandParent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
});
let parent = document.querySelector("#p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
});
let child = document.querySelector("#c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
});
</script>
Nothing gets printed in the console.
<div id="p2">
<div id="p1" onclick="event.stopImmediatePropagation()">
<button id="c1">I am a child button</button>
</div>
</div>
<script>
let grandParent = document.querySelector("#p2");
grandParent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
});
let parent = document.querySelector("#p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
});
let child = document.querySelector("#c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
});
</script>
This gets printed in the console when the above button is clicked.
* Do not use event bubbling unnecessarily.
3) Event Capturing:
Netscape Browser was the first to introduce the concept of Event Capturing. Event Capturing is opposite to event bubbling, where in event capturing, an event moves from the outermost element to the target. Otherwise, in case of event bubbling, the event movement begins from the target to the outermost element in the file. Event Capturing is performed before event bubbling but capturing is used very rarely because event bubbling is sufficient to handle the event flow.
<div id="p2">
<div id="p1">
<button id="c1">I am a child button</button>
</div>
</div>
<script>
let grandParent = document.querySelector("#p2");
grandParent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
}, true);
let parent = document.querySelector("#p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
}, true);
let child = document.querySelector("#c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
}, true);
</script>
This gets printed in the console when the above button is clicked.
<div id="p2">
<div id="p1">
<button id="c1">I am a child button</button>
</div>
</div>
<script>
let grandParent = document.querySelector("#p2");
grandParent.addEventListener("click", function() {
console.log("Grand Parent is invoked");
}, true);
let parent = document.querySelector("#p1");
parent.addEventListener("click", function() {
console.log("Parent is invoked");
});
let child = document.querySelector("#c1");
child.addEventListener("click", function() {
console.log("Child is invoked");
}, true);
</script>
This gets printed in the console when the above button is clicked.
4) JavaScript ES6:
JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of JavaScript that was introduced in 2015. ECMAScript is the standard that JavaScript programming language uses.
ECMAScript provides the specification on how the JavaScript programming language should work.
1) JavaScript let
JavaScript let is used to declare variables. Previously, variables were declared using the var keyword.
The variables declared using let are block-scoped. This means they are only accessible within a particular
block.
// variable declared using let
let name = 'Sara';
{
// can be accessed only inside
let name = 'Peter';
console.log(name); // Peter
}
console.log(name); // Sara
2) JavaScript const
The const statement is used to declare constants in JavaScript. Once declared, you cannot change the
value of a const variable.
// name declared with const cannot be changed
const name = 'Sara';
let name = 'Swati';
{
// can be accessed only inside
let name = 'Avni';
console.log(name); // Avni
}
console.log(name); // Swati
const value1 = 5;
let value2 = 7;
value2 = 10;
(Remove /* */ in pairs to test and use the same pattern for all commented snippets)
/*
let name = 'Swati';
{
let name = 'Avni';
console.log(name);//Avni
}
console.log(name);//Swati
*/
/*
const name = 'Swati';
{
const name = 'Avni';
console.log(name);//Avni
}
console.log(name);//Swati
*/
/*
var name = 'Swati';
{
var name = 'Avni';
console.log(name);//Avni
}
console.log(name);//Avni
*/
/*
let value1 = 2;
value1 = 3;
console.log(value1);
const value2 = 2;
//value2 = 3;//error
console.log(value2);
*/
5) JavaScript Arrow Function
In the ES6 version, you can use arrow functions to create function expressions.
This function
// function expression
let x = function(x, y) {
return x * y;
}
can be written as
// function expression using arrow function
let x = (x, y) => x * y;
/*
let x = function(x, y){
return x + y;
}
console.log(x(1, 2));
*/
/*
let x = (x, y) => x + y;
console.log(x(1, 2));
*/
/*
let x = (x, y) => {
let res = x + y;
return res;
};
console.log(x(1, 2));
*/
/*
let greet = () => console.log('Hello world');
greet();
*/
/*
let greet = x => console.log(`Hello ${x}`);
greet('Swati');
*/
/*
let age = 5;
let welcome = age < 18 ? () => { console.log("UnderAge") } :
() => { console.log("Adult") };
welcome();
//(condition)?(if true):(if false)
*/
6) JavaScript Classes
JavaScript class is used to create an object. Class is similar to a constructor function.
Keyword class is used to create a class. The properties are assigned in a constructor function.
Now you can create an object. For example,
class Person {
constructor(name) {
this.name = name;
}
}
const person1 = new Person('Swati');
console.log(person1.name); // Swati
7) Default Parameter Values
In the ES6 version, you can pass default values in the function parameters.
function sum(x, y = 10) {
console.log(x + y);
}
sum(5);
sum(5, 6);
If you don't pass the parameter for y, it will take 10 by default.
/*
function sum(x, y = 10){
console.log(x + y);
}
sum(5);
sum(5, 6);
*/
/*
function sum(x = 1, y = x, z = x + y){
console.log(x + y + z);
}
sum();
*/
/*
function sum(x = y, y = 1){
console.log(x + y);
}
sum();//error
sum(5);
sum(0, 1);
*/
/*
const sum = () => 15;
const calculate = function (x, y = x * sum()) {
return x + y; //10 + 150
}
const result = calculate(10);
console.log(result); //160
*/
/*
function test(x = 1) {
console.log(x);
}
test(undefined);
*/
8) JavaScript Template Literals
The template literal has made it easier to include variables inside a string.
For example, before you had to do:
const first_name = "Jack";
const last_name = "Sparrow";
console.log('Hello ' + first_name + ' ' + last_name);
This can be achieved using template literal by:
const first_name = "Jack";
const last_name = "Sparrow";
console.log(`Hello ${first_name} ${last_name}`);
9) JavaScript Destructuring
The destructuring syntax makes it easier to assign values to a new variable.
Object Destructuring:
let person = {
name: 'Swati',
age: 29,
gender: 'female'
}
/*
let { gender, name, age } = person;
console.log(name);
console.log(age);
console.log(gender);
*/
/*
let { gender: gender1, name: name1, age: age1 } = person;
console.log(name1);
console.log(age1);
console.log(gender1);
*/
let { name, ...rest } = person;
console.log(name);
console.log(rest);
10) Array Destructuring:
/*
let arr = ['one', 'two', 'three'];
let [x, y, z] = arr;
console.log(x, y, z);
*/
/*
let arr = [10];
let [x = 5, y = 7] = arr;
console.log(x, y);
*/
/*
//Swap
let x = 10;
let y = 20;
[x, y] = [y, x];
console.log(x, y);
*/
/*
let arr = ['one', 'two', 'three'];
let [x, , z] = arr;
console.log(x, z);
*/
//spread
let arr = ['one', 'two', 'three'];
let [x, ...y] = arr;
//let [,...x] = arr;
console.log(x, y);
11) JavaScript import and export
You could export a function or a program and use it in another program by importing it.
12) JavaScript Promises
Promises are used to handle asynchronous tasks.
13) JavaScript Rest Parameter and Spread Operator
You can use the rest parameter to represent an indefinite number of arguments as an array.
You pass the remaining arguments using ... syntax. Hence, the name rest parameter. You use the spread syntax ... to copy the items into a single array.
Both the rest parameter and the spread operator use the same syntax. However, the spread operator is used with arrays (iterable values).
function print(a, b, ...c) {
console.log(a, b, c);
}
print('one', 'two', 'three', 'four');
let arr1 = ['one', 'two'];
let arr2 = [...arr1, 'three', 'four', 'five'];
console.log(arr2);
let arr3 = [...arr1];
arr1.push('Swati');
console.log(arr3);
let obj1 = { x: 1, y: 2 };
let obj2 = { z: 3 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3);
function sum(x, y, ...z) {
console.log(x, y, z);
let sum = x + y + z;
console.log(sum);
console.log(typeof sum);
}
let num1 = [1, 2, 3, 4]
sum(...num1);
console.log(...num1);
Comments
Post a Comment