Event Invoked Functions 2
See the Pen 5.4 Event Invoked Functions 2 by LSU DDEM (@lsuddem) on CodePen.
Event Invoked Functions 2
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
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.
In the codepen example, text changes when hovered over. The onhover is in the HTML tag of the paragraph element, just like an onclick.
Codepen Example:
See the Pen 5.4 Example by LSU DDEM (@lsuddem) on CodePen.
onmouseout
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.
See the Pen 5.4 Example_1 by LSU DDEM (@lsuddem) on CodePen.
onmouseover and onmouseout together
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.
See the Pen 5.4 Example_2 by LSU DDEM (@lsuddem) on CodePen.
onkeydown
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.
See the Pen 5.4 Example_3 by LSU DDEM (@lsuddem) on CodePen.
Exercise 5.4
See the Pen Exercise 5.4 by LSU DDEM (@lsuddem) on CodePen.