In our section on functions, we learned about event invoked functions: functions that are triggered to run by a certain event, for example the pressing of a button.
We learned that we can use onclick, which will trigger an action when an element is clicked.
In this chapter, we learn other useful events.
onmouseover invokes a function when a mouse hovers over an element.
onmouseover is similar to onclick in that we put it in the opening tag of our element, and give it a function name in quotes.
onmouseout is kind of the reverse of onmouseover. It invokes a function when you move the mouse off an element.
In the codepen example, the text is given a border when the mouse moves off the paragraph element.
onmouseover and onmouseout can be used together to make elements continue to change as the mouse moves on and off them.
In the following codepen example, we will create onmouseout and onmouseover events that work together on a single element.
onkeydown triggers a function every time a key is pressed (any key on the keyboard).
onkeydown works best with input elements (elements in which text can be input), or generally, elements that are “selectable” - they can be selected on the webpage.
In the following Codepen example, you will see an input element. There are different types of inputs, but the default is text. input elements do not need a closing tag.