JavaScript: Introduction to DOM and Attaching Handlers

Size: px

Start display at page:

Download "JavaScript: Introduction to DOM and Attaching Handlers"

Claire Harper
5 years ago
Views:

1 JavaScript: Introduction to DOM and Attaching Handlers CISC 282 October 30, 2018 What Is DOM? Document Object Model An application programming interface (API) for HTML Set of objects, properties and methods Allows a programming language to interact with an HTML document via the provided items Generally associated with JavaScript First proposed by the W3C in the mid-1990s 2

2 Window Represents the web browser's window Displaying the current HTML document Access via the global object window The core element in DOM All "global" DOM items actually belong to window Both properties and functions Access using window.item or simply item e.g., document.write(...) or window.document.write(...) 3 Some Window Properties Property Type Description document Document The current HTML document history History The user's recently visited pages location Location The browser's current URL navigator Navigator The web browser screen Screen The user's screen 4

3 Some Window Functions Method Description alert(...), confirm(...), prompt(...) open(...), close() moveby(x, y), moveto(x, y) resizeby(w, h), resizeto(w, h) scrollby(x, y), scrollto(x, y) Produce dialog boxes Open or close a browser window Change the browser window's position Change the browser window's size Scroll within the browser window 5 Document The actual HTML document and all of its elements Property Type Description body Body The document's body title String The title of the document Method Return Description getelementbyid(id) Element The element with the given id getelementsbyclassname( name) getelementsbytagname( name) NodeList NodeList All elements with the class name All elements with the tag name 6

4 Unobtrusive JavaScript Goal: separate content, style, and behaviour Content in HTML Style in separate CSS file Behaviour in separate JavaScript file Event handlers in tags lack of separation Better to dynamically attach them in JavaScript Unobtrusive JavaScript 7 Every DOM element has properties that match events domelement.onevent = function Get the element from the document Use these properties to attach event handlers e.g., document.getelementbyid("id").onclick = function; 8

5 Attaching Handlers: OK Sub-optimal option: via onload for Window <script... src="attachandhandle.js"></script> attachandhandle function handler() {... function attachhandlers() { document.getelementbyid("id").onevent = handler; window.onload = attachhandlers; 9 onevent Conflict and Listeners Problem: can only set element.onevent = function once What if you have multiple files for handlers? What if you're using other libraries? Best option: add any number of listeners element.addeventlistener(eventname, function, options) eventname is a String (e.g., load ) function is a reference to the handler We won t go into options 10

6 Attaching Handlers: Best Using addeventlistener <script... src="attachandhandle.js"></script> attachandhandle function handler() {... function attachhandlers() { let eventelement = document.getelementbyid("id"); eventelement.addeventlistener("event", handler); window.addeventlistener("load", attachhandlers); A Handler s Event 11 Can request the Event object as a parameter in an event handler function handler(event) {... The properties of event contain information about it target: the element on which the event occurred type: the type of the event and more 12

JavaScript: Events, DOM and Attaching Handlers

JavaScript: Events, DOM and Attaching Handlers CISC 282 October 11, 2017 Keyboard and Text Events Name The User Must Applicable Elements blur remove focus , ,... focus apply focus , ,...