Focus Event Types
DOM Event Basics for HTML – Part 2
DOM for HTML
Foreword: In this part of the series I talk about focus events within a document.
By: Chrysanthus Date Published: 7 Jun 2015
Introduction
onfocus
A browser MUST dispatch this event when an event target (element) receives focus. The focus MUST be given to the element before the dispatch of this event type. You normally type the event as an attribute to the first tag of the element. Try the following code and click the textarea element to see the response of the event:
<!DOCTYPE html>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p> a paragraph</p>
<form>
<textarea cols=50 rows=4 onfocus=evFn()>
</textarea>
</form>
<script type="text/ecmascript">
function evFn()
{
alert('Text area has got focus.');
}
</script>
</body>
</html>
onblur
A browser MUST dispatch this event when an event target loses focus. The focus MUST be taken from the element before the dispatch of this event type. Try the following code. Click the textarea element and then click the paragraph, so that the textarea element should loose focus.
<!DOCTYPE html>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p> a paragraph</p>
<form>
<textarea cols=50 rows=4 onblur=evFn()>
</textarea>
</form>
<script type="text/ecmascript">
function evFn()
{
alert('Text area has lost focus.');
}
</script>
</body>
</html>
Note that after clicking the textarea element, if you click anywhere outside the textarea, the focus will still be lost.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
DOM Basics for HTMLDOM Event Basics for HTML
HTML Text and Other Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM
DOM and HTML Embedded Content
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Major in Website Design
Web Development Course
Producing a Pure Perl Library
BACK NEXT