1 / 12

Introduction to Programming the WWW I

Dive into the history and evolution of web browser event models, mouse events, drag-and-drop applications, and keyboard events. Learn about the nature of events on the web, event propagation, bubbling, and creating interactivity on web pages.

awhittaker
Download Presentation

Introduction to Programming the WWW I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 12

  2. Chapter Objectives • Learn the history of Web browser event models • Discover the nature of events on the Web • Explore event propagation and bubbling • Discover mouse events and position • Use visibility techniques to create hypertext • Create drag-and-drop applications • Use keyboard events in Web page development

  3. History of GUI programming • Formerly, type in commands from keyboard • 1970’s, 1980’s: Xerox research on GUI • 1984: Macintosh operating system • ~1990: Windows • XWindows/UNIX

  4. History of Web Browser Events • Limited support for events in early browsers • onclick • Expanded events in version 4.0 browsers • Disparate event models (NN4 vs. IE4) • New W3C event model

  5. Events on the Web • Browser creates events in response to user action. • Event object begins life when user acts • Event object ends life when scripts stop processing it • One event at a time • Netscape and W3C static Event object • IE4+ window.event • Every event has a target

  6. Events and event handlers • events are objects that contain information about what happened • event handlers are functions that are members of an element that respond to particular events

  7. Propagation and Bubbling

  8. More on W3C event model • use <element>addEventListener() to add an event listener and specify whether the event should be handled on the way down or up /* on the way down */ document.addEventListener(“click”,foo,true); /* on the way up */ document.addEventListener(“click”,bar,false); • not widely employed

  9. Tracking Mousemove Events and Mouse Position • <body onmousemove = "showxy(event);”> function showxy(evt){ if (window.event){ evt = window.event; } if (evt){ var pos = evt.clientX + ", " + evt.clientY; window.status=pos; } }

  10. Hypertext with Mouse Events • Title tag for single line tool tips • Hypertext for multi-line content • Add event handlers to links • onmouseover="doHT(event,'vitry','visible');” • onmouseout="doHT(event,'vitry',’hidden');” • First parameter passes event • Second parameter passes ID • Third parameter passes visibility

  11. Drag-and-Drop Applications • Place drag-and-drop code in library • Place utility functions in library • Add event handlers to div • onmousedown="setDrag(event,this);" • onmouseup="checkdroploc('1','0');” • Drag begins on mousedown • Drag ends on mouseup • Script checks new position of div • Simplified version

  12. Keyboard Events • Keyboard is fasted input device • onload="init();” • document.onkeyup = getKeyEvent; • Obtains keyCode • Check for letters, numbers, or space bar • Swap text node value to show key typed

More Related