DOM & EventsDocument Object Model, Event Loop, Event

Bubbling & Events

Event Loop

• JS Engine executes JS in a single threaded way.

• Fakes Concurrency

• What if we write some code that blocks the flow ?

console.log(“Javascript UI/UX Session");function a(x){

console.log(“Starting for a()");b(x);console.log(“Ending of a()");

}function b(y){

console.log(“Starting of b()");console.log("value passed is " +y);console.log(“Ending of b()");

}console.log("Start");a(45);console.log("End");

Event Table & Event Queue

• Any callback(async) function in the code will be added to Event Table.

• Function register itself in Event Table & will wait for the expected event to happen.

• Once event happens Event Table will move the function to Event Queue.

• Event Queue is a staging area, this will move function back to Execution.

DOM

Methods to access DOM

• Finding Elements• Changing Elements• Adding or Removing Elements

Questions???