Review of the DOM Node properties and methods Some ways of accessing nodes

1. Topic 4b: Event Handling and the DOM • By the end of this lecture you should : • understand the benefits of the DOM • - know the node properties and methods • - be able to manipulate HTML content by accessing and changing the content of nodes • - Understand the basis of event handling • - be able to implement basic event handlers and listeners. • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2

2. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Review: What is the DOM? What are the two key concepts behind the DOM?

3. Topic 4: The DOM and event handling Recall the DOM treats all HTML pages as a collection of objects arranged in a hierarchy • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2

4. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 The HTML document from the perspective of the DOM

5. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Node properties

6. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Node methods

7. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 So why do we bother with the properties and methods of nodes?

8. Topic 4: The DOM and event handling EXAMPLE – walking the DOM. • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Link to the HTML file which shows the code of the Example –click the link to run it in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code

9. Topic 4: The DOM and event handling Accessing nodes on the tree: • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Link to the HTML file which shows the code of the Example – click the link to run it in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code

10. Topic 4: The DOM and event handling Accessing nodes on the tree: • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Link to the HTML file which shows the code of the Example – click the link to run it in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code

11. Topic 4: The DOM and event handling To modify the DOM (i.e. append, copy or remove elements) it is useful to know the DOM methods below: • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2

12. Topic 4: The DOM and event handling Easy way to modify the contents of an element: • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Example 1: Retrieving the contents of two paragraphs on an HTML page – the script grabs the content of two paragraphs and displays them in upper case at the bottom of the original paragraphs. Example 2: Changing the text after user interaction - click the links to run examples in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code

13. Topic 4: The DOM and event handling Creating new elements on the fly: • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Example– the element is created first and then appended to the document Example

14. Topic 4: The DOM and event handling Creating new elements on the fly: • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Example

15. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Recall: What is an event? Consider: What are the main methods by which a user makes input?

16. Topic 4: The DOM and event handling • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Recall: What is an event? Consider: What are the main methods by which a user makes input? What does the user interact with? A list of standard events in javascript can be found here: http://www.w3schools.com/tags/ref_eventattributes.asp See also http://www.w3schools.com/js/js_events.asp Example of inline and scripting

17. Topic 4: The DOM and event handling DOM 2 – the flow of events • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2

18. Topic 4: The DOM and event handling DOM 2 – the flow of events- how bubbling works • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2

19. Topic 4: The DOM and event handling DOM 2 – how capturing works • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Example

20. Topic 4: The DOM and event handling DOM 2 – Stopping or cancelling event flow • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 Event methods Example

21. Topic 4: The DOM and event handling DOM 2 – Event listeners • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2 The addEventListener Method This method takes three arguments: 1. The event type to listen for (mouseover, click, etc.). 2. A function to be executed when the event is fired. 3. A Boolean (called useCapture) of true or false to specify the event propagation type: true to turn on event capturing and false to turn on event bubbling (the most cross-browser-compliant way is false). Using this within the Handler the this keyword, when used with W3C event handlers, is a reference to the HTML element from which the event handler was fired, giving you easy access to the element. Example of event listener Example of multiple events Example of removing listeners

22. Topic 4b: Event Handling and the DOM • By the end of this lecture you should : • understand the benefits of the DOM • - know the node properties and methods • - be able to manipulate HTML content by accessing and changing the content of nodes • - Understand the basis of event handling • - be able to implement basic event handlers and listeners. • Review of the DOM • Node properties and methods • Some ways of accessing nodes • Appending, copying and removing nodes • Event handling • Inline • Scripting • DOM2