Broad Network


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

This is part 2 of my series, DOM Event Basics for HTML. In this part of the series I talk about focus events within a document. When an element such as the Form textarea element has focus, any keyboard action such as typing a key can have an effect on the element. You can change the focus of elements by just clicking one element after the other. You should have read the previous part of the series before reaching here, as this is a continuation.

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 HTML
DOM 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

Comments

Become the Writer's Fan
Send the Writer a Message