Quick JavaScript Interview Questions (2015)
Chapter 2. Questions on Event
Q. How Event works?
ANSWER
Event propagation follows two phases capturing and bubbling phase.
Capturing Phase:
In this phase, event first makes its way downwards from the DOCUMENT to the target element by passing all inner elements.
Bubbling Phase:
In this phase event makes its way back upwards from the target element to DOCUMENT by passing all outer wrapped elements.
Q. How to attach event to an element?
ANSWER
According to DOM Level 2 Event Specification an event can be attached to an element using addEventListener() method using three arguments.
Syntax:
<element>.addEventListener(<eventname>,<eventcallback>,<bo oleanphase>)
eventname:
Represents type of event as String parameter. For Example click, mouseover, mouseout etc.
eventcallback :
This represents the callback function to be called for the event to be handled.
booleanphase :
This represents the phase of the event where the listener is attached. A FALSE value represents the bubbling phase and a TRUE value represents a capturing phase.
Example:
A click event listener is added to the document which alerts a message when click occur.
document.addEventListener('click', function () { alert("Insider Event Listener");
},false);
Q. How to attach event prior to IE9 browser version? ANSWER
In IE older bowser an event can be attached to an element using attachEvent() method. Only For bubbling phase a listener can be added.
Syntax:
<element>.attachEvent(<eventname>,<eventcallback>)
Example:
A click event listener is added to the document which alerts a message when click occur. Below screenshot shows adding a click event in IE 10 developer toolbar.
Except IE, the other browser added by addEventListener() method. Below screenshot shows the demonstration this method in Firebug.
Q. How to remove event listener?
ANSWER
According to DOM Level 2 Event Specification an Event Listener can be removed using removeEventListener() method. For IE browsers detachEvent() method must be used.
The following screenshot shows detaching click event handler from document for IE browser.
The following screenshot shows removing click event handler from document for Firefox browser.
Q. How setTimeOut() and clearTimeOut() function works? ANSWER
The setTimeout() method calls a function or evaluates an expression once after a specified number of milliseconds. clearTimeOut() method stop the execution of the function specified in the setTimeout() method.
Syntax:
var timeOut = setTimeout(function,milliseconds,lang) clearTimeout(timeOut)
Below code shows the demonstration of these time out methods.
var timeOutHandler= function(){
console.log("inside Time Now ", new Date().getSeconds()); clearTimeout(timeOut)
}
console.log("Time Now ", new Date().getSeconds()); var timeOut = setTimeout(timeOutHandler,4000);
Below screenshot show the execution of the timeOutHandler() method after 4 seconds.
Q. How setInterval() and clearInterval() function works? ANSWER
The setInterval() method calls a function or evaluates an expression in specified interval of milliseconds. clearInterval() method stop the execution of the function specified in the setInterval() method.
Syntax:
var timeInterval = setInterval(function, milliseconds) clearInterval(timeInterval)
Below code demonstrate these interval handlers.
var counter = 0,
timeIntervaltHandler= function(){
console.log("inside Time Now ", new Date().getSeconds()); counter++;
console.log("Handler Called count ",counter)
if(counter === 4) {
clearInterval(timeInterval);
console.log("Clearing the interval handler")
}
}
console.log("Time Now ", new Date().getSeconds()); var timeInterval = setInterval(timeIntervaltHandler,2000);
Below screenshot shows the handler called every 2 second for 4 times .After 4th called clearInterval() remove the execution.
