Event Propagation part 1

Event Propagation



There are two ways of event propagation in the HTML DOM: bubbling and capturing.

Event propagation allows for the definition of the element order when an event occurs. If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element's "click" event should be handled first?

In bubbling, the innermost element's event is handled first and then the outer element's event is handled. The <p> element's click event is handled first, followed by the <div> element's click event.

In capturing, the outermost element's event is handled first and then the inner. The <div> element's click event is handled first, followed by the <p> element's click event.
Capturing goes down the DOM.
Bubbling goes up the DOM.

Comments

Post a Comment

Popular posts from this blog

ESC 6 variable and string part 3

Template Literals in ES6 Template literals  are a way to output variables in the  string .  Prior to ES6 we had to break the  string , for example: let name = 'David'; let msg = 'Welcome ' + name + '!'; console.log(msg); Try It Yourself ES6 introduces a new way of outputting  variable  values in strings. The same code above can be rewritten as: let name = 'David'; let msg = `Welcome ${name} !`; console.log(msg); Try It Yourself Notice, that template literals are enclosed by the  backtick  (` `) character instead of double or single quotes. The  ${expression}  is a placeholder, and can include any expression, which will get evaluated and inserted into the template literal. For example: let a = 8; let b = 34; let msg = `The sum is ${a+b} `; console.log(msg); Try It Yourself To escape a backtick in a template literal, put a backslash \ before the backtick.
Read more

Es6 distructing part 3

Object Destructuring in ES6 Similar to Array destructuring,  Object destructuring  unpacks properties into distinct variables. For example: let obj = {h:100, s: true}; let {h, s} = obj; console.log(h); // 100 console.log(s); // true Try It Yourself We can assign without declaration, but there are some syntax requirements for that: let a, b; ({a, b} = {a: 'Hello ', b: 'Jack'}); console.log(a + b); // Hello Jack Try It Yourself The  ()  with a  semicolon (;)  at the end are  mandatory  when destructuring without a declaration. However, you can also do it as follows where the  ()  are not required: let {a, b} = {a: 'Hello ', b: 'Jack'}; console.log(a + b); Try It Yourself You can also assign the  object  to new  variable  names. For example : var o = {h: 42, s: true}; var {h: foo, s: bar} = o; //console.log(h); // Error console.log(foo); // 42 Try It Yourself Finally you can assign  default ...
Read more

ES6 Map & Set part 2

ES6 Set A  Set   object  can be used to hold  unique  values (no repetitions are allowed). A value in a set can be anything (objects and primitive values).  The syntax  new Set([iterable])  creates a Set  object  where  iterable  is an  array  or any other iterable  object  of values. The  size  property returns the number of distinct values in a set. For example: let set = new Set ([1, 2, 4, 2, 59, 9, 4, 9, 1]); console.log(set.size); // 5 Try It Yourself Methods add(value)  Adds a new element with the given value to the Set. delete(value)  Deletes a specified value from the set. has(value)  Returns true if a specified value exists in the set and false otherwise. clear()  Clears the set. values()  Returns an Iterator of values in the set. For example: let set = new Set(); set. add (5). add (9). add (59). add (9); console.log(set. has (9)); for (let v of set. values...
Read more