Embed Size (px)
Citation preview
• Review of the DOM• Node properties and methods• Some ways of accessing nodes• Appending, copying and removing nodes• Event handling– Inline– Scripting– DOM2
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.
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?
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 the DOM treats all HTML pages as a collection of objects arranged in a hierarchy
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
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
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
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?
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
EXAMPLE – walking the DOM.
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
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
Accessing nodes on the tree:
The document.getElementById() Method
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
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
Accessing nodes on the tree:
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
Thedocument.getElementsByTagName() Method
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
To modify the DOM (i.e. append, copy or remove elements) it is useful to know the DOM methods below:
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
Easy way to modify the contents of an element:
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
The innerHTML Property and the Element’s Content
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
Creating new elements on the fly:
Example– the element is created first and then appended to the document
The createElement() method and createTextNode() method
The insertBefore() method allows you to insert a child node before a specific node (called a reference
node). If the reference node is null, this will insert the node at the end of a list of child nodes.
The format is insertBefore(newElement, targetElement)
Example
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
Creating new elements on the fly:
Example
setAttribute() method creates a new attribute for an element. If an attribute with that name (nodeName) already exists in the element, it is replaced by the new one.
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?
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 alsohttp://www.w3schools.com/js/js_events.asp
Example of inline and scripting
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
DOM 2 – the flow of events
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
DOM 2 – the flow of events- how bubbling works
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
DOM 2 – how capturing works
Example
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
DOM 2 – Stopping or cancelling event flow
Example
Event methods
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
DOM 2 – Event listeners
Example of event listener
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 Handlerthe 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 multiple events
Example of removing listeners
• Review of the DOM• Node properties and methods• Some ways of accessing nodes• Appending, copying and removing nodes• Event handling– Inline– Scripting– DOM2
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.
