onchange and onblur
Two other events that are often combined with input boxes are onchange
and onblur
. onchange
gets triggered when an element changes, for example, when the value of an input box changes. onblur
gets triggered when an object goes out of focus; for example, when you have the cursor in one input box and the cursor goes to another input box, the onblur
event of the first input box will get triggered.
Here is an example of both in practice; it's an HTML snippet of the body of a web page. The inputs contain onblur
and onchange
, and there is an extra function.
<!DOCTYPE html>
<html>
<body>
<div id="welcome">Hi there!</div>
<form>
<input type="text" name="firstname" placeholder="First name" onchange="logEvent()" />
<input type="text" name="lastname" placeholder="Last name" onblur="logEvent()" />
...