DRAG DROP
You create an HTML5 application that includes JavaScript. The application performs several AJAX
requests. One AJAX request retrieves order information from a web service and then sends the
information back to a webpage within the application.
You must create a custom event. You have the following requirements:
The webpage must contain an HTML element named ordersListing that will receive the custom event
notification.
The event name must be ordersReceived.
The event must pass a custom value named orderCount.
The event must run a JavaScript method named showOrdersReceivedCount after the orders Listing
HTML element receives the event.
Do not allow other DOM elements to receive the event.
Allow the event to be cancelled.
Send the event into the event system.
You need to implement the custom event to notify specific DOM elements of the AJAX response.
Which three actions should you perform in sequence? (Develop the solution by selecting the
required code segments and arranging them in the correct order.)
Answer: See the explanation.
Explanation:
Box 1:
Box 2:
Box 3:
Note:
* From Scenario: Do not allow other DOM elements to receive the event.
So: bubbles: false
* From scenario: Allow the event to be cancelled.
So: cancellable: true
* From scenario:
The webpage must contain an HTML element named ordersListing that will receive the custom event
notification.
* Events which are designated as bubbling will initially proceed with the same event flow as nonbubbling events. The event is dispatched to its target EventTarget and any event listeners found
there are triggered. Bubbling events will then trigger any additional event listeners found by
following the EventTarget’s parent chain upward, checking for any event listeners registered on each
successive EventTarget. This upward propagation will continue up to and including the Document.
EventListeners registered as capturers will not be triggered during this phase. The chain of
EventTargets from the event target to the top of the tree is determined before the initial dispatch of
the event. If modifications occur to the tree during event processing, event flow will proceed based
on the initial state of the tree.
* Ajax (an acronym for Asynchronous JavaScript and XML) is a group of interrelated web
development techniques used on the client-side to create asynchronous web applications. With
Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the
background) without interfering with the display and behavior of the existing page. Data can be
retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON
is often used instead), and the requests do not need to be asynchronous.
Box 1 should be second, box 2 should be 3. box 3 makes no sence at all. Why do u want to fire event that dos mot exists. It must lead to exception!
As box 1 i would use var ordersListing =
1. var ordersListener
2. ordersListener.addEventListener
3. ordersListener.dispatchEvent
The most correct answer is the following:
1) var ordersListing = document.getElementById(“ordersListing”);
2) ordersListing.addEventListener(“ordersReceived”, showOrdersReceivedCount);
3) ordersListing.dispatchEvent(new CustomEvent
(“ordersReceived”, {
detail: {
orderCount: 5
},
bubbles: false,
cancelable: true
}));
M is right!!!!
Following my condiderations supporting M solution:
1) var ordersListing contain a reference to the element named “ordersListing” in the page
2) use the addEventListener method to assign the event to orderListing: the event is named “ordersReceived” (first argument of addEventListener method) an the method showOrdersReceivedCount (second argument of addEventListener method) has to be executed when event triggers
3) use the dispatchEvent to raise the event: the event is named “ordersReceived” (first argument of CustomeEvent object constructor), and contains the property that fit the question request (second argument of CustomEvent Object constructor)
I would be surprised when he’s not! 🙂
True, true…
Tested and confirmed. M is correct.
Thanks
BOX 1
BOX 7
and BOX 4
WRONG ANSWER