Events

HTML DOM events are "things" that happen to HTML elements in the Document Object Model. When JavaScript is used in HTML pages, JavaScript can "react" on these events. An HTML event can be something the browser does, or something a user does.

Some common events in the DOM manipulattion include:

onchange - Some HTML element has been modified
onclick - An HTML element has been clicked on
onmouseover - An HTML element was hovered over
onmouseout - Mouse cursor moves off HTML element
onkeydown - A keyboard button is pressed
onload - The HTML page has finished loading

Events are normally used in combination with functions, and the function will only be executed when the event occurs (such as when a user clicks a button).

Example



<!DOCTYPE html>
<html>
<body>

<p id="demo">This paragraph's background color will change if the user clicks on it in the browser</p>

<script>
//the 'onclick' event is set to call the changeColor() function
document.getElementById("demo").onclick = function(){changeColor()};

//the changeColor() function sets the chosen element's background to 'red'
function changeColor() {
    document.getElementById("demo").style.background = "red";
} 
</script>

</body>
</html>

Exercise

Add the 'onmouseenter' event to the selected element in order to execute myFunction() when the user's mouse moves onto the element


document.getElementById("container"). = function(){myFunction()};
}

  try Again!