When an element gains focus, the browser fires a "focus" event on it. When it loses focus, a "blur" event fires.
Unlike other events, these two events do not propagate. A handler on a parent element is not notified when a child element gains or loses focus.
The following example displays help text for the text field that currently has focus.
<p>Name:<input type="text"data-help="Your full name"></p>
<p>Age:<input type="text"data-help="Age in years"></p>
<p id="help"></p>
<script>
var help = document.querySelector("#help");
var fields = document.querySelectorAll("input");
for (var i = 0; i & lt; fields.length; i++) {
fields[i].addEventListener("focus", function(event) {
var text = event.target.getAttribute("data-help");
help.textContent = text;
});
fields[i].addEventListener("blur", function(event) {
help.textContent = "";
});
}
</script>
