how to write onblur and onfocus event in javascript?
<p><strong>Question</strong>:  </p>

<pre><code> &lt;body onload="setBlurFocus()"&gt;   
     &lt;form method="POST" action="#"&gt;   
              &lt;input id="id_username" type="text" name="username" maxlength="100" /&gt;
              &lt;input type="text" name="email" id="id_email" /&gt;
              &lt;input type="password" name="password" id="id_password" /&gt; 
        &lt;/form&gt; 
    &lt;/body&gt;
</code></pre>

<p>I <strong>wrote</strong> :</p>

<pre><code>function setBlurFocus () {
    var user_input = document.getElementById('id_username');
    var email = document.getElementById('id_email');
    var password = document.getElementById('id_password');
    user_input.onblur = userSetBlur();
    email.onblur = emailSetBlur();
    password.onblur = passSetBlur();
    user_input.onfocus = function() {
            document.getElementById('id_username').value = ''   
        }
    email.onfocus = function() {
            document.getElementById('id_email').value = ''  
        }
    password.onfocus = function() {
            document.getElementById('id_password').value = ''   
        }

}

function userSetBlur() {
    document.getElementById('id_username').value = 'Username'
}
function emailSetBlur() {
    document.getElementById('id_email').value = 'Email'
}

function passSetBlur() {
    document.getElementById('id_password').value = 'Password'
}
</code></pre>

<p><strong>Question?</strong>
How to <code>generalize</code> or <code>optimized</code> this code?</p>
