CNIT 133

1
CNIT 133

• Events and Event Handling

2
Objectives

• JavaScript Events and Event Handling
• Basic Event Handling
• Event Handler Return Values
• Event Handlers and the this Keyword

3
Events and Event Handling

• JavaScript programs use an event-driven
  programming model.
• The web browser generates an event whenever
  something interesting happens to the document or
  to some element of it. For example, the web
  browser generates an event when it finishes
  loading a document, when the user moves the mouse
  over a hyperlink, or when the user clicks on a
  button in a form
• If a JavaScript application cares about a
  particular type of event for a particular
  document element, it can register an event
  handler a JavaScript function or snippet of
  code for that type of event on the element of
  interest. Then, when the particular event occurs,
  the browser invokes the handler code.
• All application with graphical user interfaces
  are designed this way they sit around waiting
  for the user to do something interesting (i.e.
  they wait for events to occur), and then they
  respond.

4
Events and Event Handling

• Three distinct and incompatible event-handling
  models are in use
• The original event model
• The standard event model
• The Internet Explorer event model

5
Basic Event Handling

• In the original event model, event-handling code
  is specified using the attributes of HTML
  elements. Thus, if your application needs to know
  when the user moves the mouse over a specific
  hyperlink, you use the onmouseover attribute of
  the ltagt tag that defines the hyperlink.
• If the application needs to know when the user
  clicks the Submit button, you use the onClick
  attribute of the ltinputgt tag that defines the
  button or the onsubmit attribute of the ltformgt
  element that contains that button.

6
Basic Event Handling

• There are quite a few different event-handler
  attributes that you can use in the original event
  model.
• They are listed in Table 17-1
• onblur
• onchange
• onclick
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onsubmit
• onunload

7
Event Handler Return Values

• In many cases, an event handler uses its return
  value to indicate the disposition of the event.
  For example, if you use the onsubmit event
  handler of a Form object to perform form
  validation and discover that the user has not
  filled in all the fields, you can return false
  from the handler to prevent the form from
  actually being submitted
• ltform action search.cgi
• onsubmitif (this.elements0.value.length
  0) return falsegt
• ltinput type textgt
• lt/formgt

8
Event Handlers and the this Keyword

• When your event handler is invoked, it is invoked
  as a method of the element on which the event
  occurred, so the this keyword refers to that
  target element
• ltinput typebutton valuepress me onclick
  callfunc(this)gt
• // the this keyword refers to the Button object.

9
Event - onload

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function mymessage()
• alert("This message was triggered from the onload
  event")
• lt/scriptgt
• lt/headgt
• ltbody onload"mymessage()"gt
• lt/bodygt
• lt/htmlgt

10
Event - onunload

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function mymessage()
• alert("This message was triggered from the
  onunload event")
• lt/scriptgt
• lt/headgt
• ltbody onunload"mymessage()"gt
• ltpgtAn alert box will display a message when you
  close this document!lt/pgt
• lt/bodygt
• lt/htmlgt

11
Event - onchange

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function preferedBrowser()
• preferdocument.forms0.browsers.value
• alert("You prefer browsing internet with "
  prefer)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltformgt
• Choose which browser you prefer
• ltselect id"browsers" onchange"preferedBrowser()"
  gt
• ltoption value"Internet Explorer"gtInternet
  Explorer
• ltoption value"Netscape"gtNetscape
• lt/selectgt
• lt/formgt
• lt/bodygt

12
Event - onsubmit

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function confirmInput()
• fnamedocument.forms0.fname.value
• alert("Hello " fname "! You will now be
  redirected to www.ccsf.edu")
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltform onsubmit"confirmInput()"
  action"http//www.ccsf.edu/"gt
• Enter your name ltinput id"fname" type"text"
  size"20"gt
• ltinput type"submit"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

13
Event - onblur

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function message()
• alert("This alert box was triggered by the onblur
  event handler")
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltpgtThe onblur event occurs when an element loses
  focus. Try to click or write in the input field
  below, then click elsewhere in the document so
  the input field loses focus.lt/pgt
• ltformgt
• Enter your name ltinput type"text"
  onblur"message()" size"20"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

14
Event - onfocus

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function message()
• alert("This alert box was triggered by the
  onfocus event handler")
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltformgt
• Enter your name ltinput type"text"
  onfocus"message()" size"20"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

15
Event onmouseover onmouseout

• lthtmlgt
• ltbodygt
• lth1 onmouseover"style.color'red'"
• onmouseout"style.color'black'"gt
• Mouse over this textlt/h1gt
• lt/bodygt
• lt/htmlgt

16
Event - onclick

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function disp_func()
• Alert(This alert box was triggered by the
  onclick event handler)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltinput typebutton valueclick to display
  message onclickdisp_func()gt
• lt/bodygt
• lt/htmlgt

17
Event - onmousemove

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• var i1
• function moveright()
• document.getElementById('header').style.position"
  relative"
• document.getElementById('header').style.lefti
• i
• lt/scriptgt
• lt/headgt
• ltbody onmousemove"moveright()"gt
• lth1 id"header"gt
• Move the mouse over this page
• lt/h1gt