Chad Lawrence

Web Development for Tech Applications (TECH 64095-001)

clawre13@kent.edu

Chapter 13 - Javascript: Events

13.1 Fill in the blanks in each of the following statements:

  1. Event handlers can be registered in XHTML using the inline model or in JavaScript using the traditional model.
  2. The state of three keys can be received by using the event object. These keys are Ctrl, Alt and Shift.
  3. If a child element does not handle an event, event bubbling lets the event rise through the object hierarchy.
  4. The return value of an event-handling function specifies whether to perform the default action for the event.
  5. In an event handler, the reference for the id of an element that fired an event is event.target.id in Firefox and event.srcElement.id in Internet Explorer.
  6. Three events that fire when the user clicks the mouse are onclick, onmousedown and onmouseup.

13.2 State whether each of the following is true or false. If the statement is false, explain why.

  1. The onload event fires whenever an element starts loading. False. The onload event fires when an element finishes loading.
  2. The onclick event fires when the user clicks the mouse on an element. True.
  3. The onfocus event fires when an element loses focus. False. It fires when an element gains focus.
  4. When using the rollover effect with images, it is a good practice to create Image objects that preload the desired images. True.
  5. Returning true in an event handler on an a (anchor) element prevents the browser from following the link when the event handler finishes. False. Returning false prevents the default action.

13.6 Write a function that responds to a click anywhere on the page by displaying an alert dialog. Display the event name if the user held Shift during the mouse click. Display the element name that triggered the event if the user held Ctrl during the mouse click.

13.6 Answer

13.7 Use CSS absolute positioning, onmousedown, onmousemove, onmouseup and the clientX/clientY properties of the event object to create a program that allows you to drag and drop an image. When the user clicks the image, it should follow the cursor until the mouse button is released.

13.7 Answer

13.8 Modify Exercise 13.7 to allow multiple images to be dragged and dropped in the same page.

13.8 Answer