Capturing Mouse Events (OnClick)

The text book rather than spending a lot of time on the grammar, get to some useful concepts that you could immediately use.

In lesson 2, you will learn about events, specifically mouse events here.
You will be able to detect whether the user has clicked a mouse botton or is hovering over something. Later, you'll learn more about other kinds of events.

In Javascript, you use what is called "event handlers". Event handler is a chunk of code that runs when some event happens. We'll look at onClick, onMouseOver, and onMouseOut. (For a full list of events, see w3schools).

One way you can do this is by adding the onclick attribute to an HTML element and put the javascript code in side double quotes. (It's not elegant but it gets us going). 

  <div onclick=" ... some javascript code"> content </div>


We will use new HTML tags like... 
  <input type="button" value=" this is the input tag in HTML"/>
  


  <button>this is the button tag </button>
Nothing happens in the above examples. We will use Javascript to react to events. Here is a full example using the button tag in HTML. The text in red is in javascript. 

<!DOCTYPE html>
<html>
<head>
    <title>onClick Demo</title>
</head>
<body>
    <input type="button" onclick="alert('Ouch, you clicked me');" value="Click Me" />
</body>
</html>
[sample file]

When the user clicks on the button, the alert window will pop up with the message "Ouch, you clicked me". The onclick event handler can beapplied to nearly all HTML elements, not just buttons.



Notes

onMouseOver and onMouseOut

In JavaScript, these event handlers are actually written in camel case (with each word after the first capitalized). 
  onClick
  onMouseOver
  onMouseOut
Unfortunately, in HTML when using it as an attribute, you have to write it in lower case.



Let's look at an example using the onMouseOver event
<!DOCTYPE html>
<html>
<head>
    <title>onMouseOver Demo</title>
</head>
<body>
    <img src="tick01.jpg" alt="image 1" onmouseover="alert('You entered the image!');" />
</body>
</html>
[sample file]


Using the onMouseOver and onMouseOut event, you can create an image rollover. 
<!DOCTYPE html>
<html>
<head>
    <title>OnMouseOver Demo</title>
</head>
<body>
    <img src="tick01.jpg" 
    onmouseover="this.src='tick02.jpg';"
    onmouseout="this.src='tick01.jpg';" />
</body>
</html>

[sample file]


We are using something we will learn later here.
this refers to the HTML element itself. So in this case, the img HTML element. If you recall the idea of DOM, we can access things inside the objcts (like properties) with the dot notation. So, what you are accessing via this.src is the src attribute inside the img object.

Note that this is where you NEED to use single quotes instead of double quotes 

  in HTML you need to put double quotes around the attribute value 

  <img src=" ">
  <onmouseover=" ">

  in Javascript you have to represent the file name as strings
  using double quotes or single quotes to indicate they are not variables

  this.src = "tick01.jpg";
  this.src = 'tick01.jpg';


  // When you combine javascript and HTML there is a problem!
  // if you use double quotes around tick01.jpg...
  
  <onmouseover="this.src = "tick01.jpg";">     // BAD




  // it will be interpreted like this
  "this.src = "                     tick01.jpg         ";"
  
  // A STRING                      VARIABLE            STRING
  

  // to prevent that you would use a single quote so that the double quote (string) does not end prematurely 
  "this.src = 'tick01.jpg';"



  Or you can  do this

  'this.src = "tick01.jpg";'
Notes