Jay Urbain, Ph.D. 1 Dynamic HTML is about scripting the DOM to - - PowerPoint PPT Presentation

▶
jay urbain ph d
SMART_READER_LITE
LIVE PREVIEW

Jay Urbain, Ph.D. 1 Dynamic HTML is about scripting the DOM to - - PowerPoint PPT Presentation

Mar 10, 2023 207 likes •310 views

Dynamic HTML Handling (non-apocalyptic) events from DOM objects Jay Urbain, Ph.D. 1 Dynamic HTML is about scripting the DOM to change a web page document after it is loaded into a browser But how do you know when the browser has finished

slide-1
SLIDE 1

1

Jay Urbain, Ph.D.

Dynamic HTML

  • Handling (non-apocalyptic) events from

DOM objects

slide-2
SLIDE 2

Dynamic HTML is about scripting the DOM to change a web page document after it is loaded into a browser

2

But how do you know when the browser has finished loading the document?

slide-3
SLIDE 3

3

JavaScript code hosted in a browser can be triggered to run in response to Events

Events are triggered by

  • Browser actions

– Page load/unload – Offline/online – ….many more

  • User actions within a page

– Button press – Mouse-over/click – Text entry – Input focus/blur – …many more

slide-4
SLIDE 4

4

Some events associated with HTML elements

Window events (valid only in <body> elements)

  • nload – generated when browser navigates to the page
  • nunload – …when browser navigates away

Input element events

  • nblur – …when an element loses keyboard focus
  • nchange – …when a [text] element changes
  • nfocus – …when an element gains keyboard focus
  • nreset – …when reset-type pushbutton pressed
  • nsubmit – …when submit-type pushbutton pressed

Mouse Events (validity restricted to certain elements)

  • nmouseover – …when cursor passes onto an element
  • nmouseout – …when cursor passes off an element
  • nclick – …when a button (or other element) is pressed

Keyboard Events (validity restricted to certain elements)

  • nkeydown – …when a key is pressed
  • nkeyup – …when a key is released
  • nkeypress – …after a key is pressed and then released

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers http://www.w3schools.com/tags/ref_eventattributes.asp

slide-5
SLIDE 5

5

There are several ways to add JavaScript to a button Method A: onclick specified in HTML

<input type="button" id=goButton value="Push me!"

  • nclick=onClickHandler()/>

The onclick attribute specifies the JavaScript function that will be called when the button is pressed. The onClickHandler() method must have been defined or linked to from within the <head> section of the page. Note the ( ) following the method name! These are required!!!

slide-6
SLIDE 6

6

Method B: onclick specified in script

The onclick attribute specifies the address of the JavaScript function that will be called when the button is pressed. Be sure to not supply “( )” after the function – otherwise, the result will be calling the function, rather assigning the function address. The script that calls getElementById must execute AFTER the page loads to make sure that the button element actually exists! Thus, getElementById is usually placed in the window.onload handler

<head> <script> //Code that executes after page loads: var button = getElementById(goButton); button.onclick = onClickHandler; // no () !!! </script> </head> <body> <input type="button" id=goButton value="Push me!"/>

slide-7
SLIDE 7

What if we only wanted a single event handler to handle multiple events, or even multiple events from multiple sources?

<input type="button" name="b1" value="Create onclick=handleEvent(event);"

  • nmouseover=handleEvent(event); >

<input type="button" name="b2" value=Modify onclick=handleEvent(event);"

  • nmouseover=handleEvent(event); >

7

The window.event object can be passed as an argument to an event handler

slide-8
SLIDE 8

Properties of the event object

  • type – a string containing the name of the event

– The onclick event type is click, onmouseover it’s mouseover, etc.

  • target – a reference to the element that caused the event

8

slide-9
SLIDE 9

Pass event or element itself

9

var type = event.type; // works for both IE and FF parElement.innerHTML = "Type: " + type + " "; var eventSource; // Event sources have to be retrieved differently for IE and FF if( event.srcElement ) {// works for IE & Chrome eventSource = event.srcElement; parElement.innerHTML += "IE: "; } else { // works for FF eventSource = event.target; parElement.innerHTML += "FF: "; } Run demo3/Eventsdemo.html in se2840/demo3 project in WebStorm!

slide-10
SLIDE 10

Pass event or element itself

10

http://jsfiddle.net/pSS68/