.blur and .focus event in native JavaScript

Question

I am writing my own "class" functions in JavaScript so I can call it and it will format a form how I want it.

The thing is i wrote my TextFade function in a website where I had access to jQuery but i would like my own code to be stand alone (not reliant on jQuery)

My question is how can I convert this piece of code :

this.textFade = function(element,password){ // needs to be changed so jQuery is not needed anymore
        if(password === 'undefined')
            password = false; // default

        $(element).focus(function() {
            if( this.value == this.defaultValue )
                this.value = "";
            if(password == true)
                this.type = "password";

        }).blur(function() {
            if( !this.value.length ) {
                this.value = this.defaultValue;
                if(password == true)
                    this.type = "text";
            }
        });
}

To something that doesnt require jQuery.

The main problem I am having is how I can't check what event got triggered on the element, if someone can explain that to me I would be able to fix it myself (without using another parameter to define it if possible).

Tried to find it in jQuery but I could not find the function for some reason.

Answer 1

I usually prefer using native javascript, but this is a case where jQuery really does come in handy. The biggest problem is you are passing in element, which could be anything (classname, node, id, tagName) which is handled by jquery quite nicely. To simplify things, we will switch element with an id parameter, and get the node with document.getElementById.

As opposed to extending jQuery, you can use the singleton pattern and extend your own objects. Set an empty object (obj), and add functions to that.

I'm not 100% sure of the functionality you are after, but here a basic translation.

<input type="text" id="hi" value="hithere">
<input type="button" id="btn" value="click to change to password" />

<script>
var obj = {};

obj.textFade = function(id, password){
     if(password === 'undefined'){
        password = false;
     }
    document.getElementById(id).onfocus = function(){
        if(this.innerHTML == this.defaultValue){
            this.innerHTML = "";
        }
        else if(password == true){
            this.setAttribute('type','password');
        }
    };
    document.getElementById(id).onblur = function(){
        if( !this.value.length ) {
            this.value = this.defaultValue;
            if(password == true){
                this.setAttribute('type','password');
            }
        }
    };
};


document.getElementById('btn').onclick = function(){
    obj.textFade('hi',true);
};
</script>

Here is a live version: http://jsfiddle.net/CJ6DK/1/

Answer 2

The main problem I am having is how I can't check what event got triggered on the element, if someone can explain that to me I would be able to fix it myself.

Normally you'd know which event was triggered because you hooked up a function to a specific event. But if you hook the same function up to more than one event, you can still determine which event occurred:

When you hook up an event using addEventListener, your event handler will receive an Event object. The type of the event is available from that object's type property. So for instance:

// Assuming `elm` is an Element
(function() {
    elm.addEventListener('blur', handler, false);
    elm.addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            // It's a blur event
        }
        else {
            // It must be a focus event
        }
    }
})();

Not all browsers currently in use in the wild support addEventListener, however (this is one of the several reasons to use a library like jQuery). On older versions of IE, you may need to use attachEvent instead (you can check by simply looking to see if the element has an addEventListener property on it). Note that if you do, within the handler, this won't point to the element on which you hooked the event (it'll point to window).

If you assign a function to the onxyz property of the element (e.g., elm.onclick = function...;), you won't receive the event object as an argument. On some browsers (IE, Chrome) you can find the event on the window object. That event object is very similar to the ones passed in by addEventListener or attachEvent, so you see this in handlers that might get hooked up that way:

function handler(event) {
    event = event || window.event;
    // ...use `event` normally...
}

...so that if there was no argument passed to the function (e.g., it wasn't hooked up with addEventListener or attachEvent, but was assigned directly to the property), it will use window.event rather than event.