Question

function $(id) {
    if (id) {
        if (window === this) {
            return new $(id);
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        return about;
    }
}

$.prototype = {
    click: function () {
        this.e.onclick = function () {
            alert("hi..");
        }
    }
};

when I excute this code :

$("skg").click2();

it return alert msg.

But I want to add a callback function like this :

$("skg").click(function(){
    alert("hi SKG");
});

How to do this?

Answer 1

Example 1

$.prototype = {
    click: function (callback) {
        this.e.onclick = callback
    }
};

but if you want to parse the DOM element you can do something like this:

Example 2

$.prototype = {
    click: function (callback) {
        this.e.onclick = function() {
           callback.call(this); 
        }
    }
};

---

EDIT:

Haha… Actually there is almost no difference.

But if you want to parse some custom arguments to your callback you can do it in the last example:

---

your call:

var handler = function(arg1, arg2, arg3, ...) {
    alert("Some alert");
};
$("someID").click(handler); 

---

Example 1:

handler gets DOM element as this so:

this = [HTML DOMElement]

The first arguments in handler (called arg1 (can also be accessed throw the array like variable arguments as the first arguments[0])) contains the click’s event property.

arguments[0] = [Event Object]

---

Example 2:

this = [HTML DOMElement]

Thats all. But you have the ability to parse extra arguments to the hander:

If your code is like this:

$.prototype = {
    click: function (callback) {
        this.e.onclick = function(event) {
           callback.call(this, event, {custom: "argument"} ); 
        }
    }
};

The handler will get:

arguments[0] = [Event Object] // Same as Example 1

But see now:

arguments[1] = [Object object]

or more precise:

arguments[1] = {custom: "argument"}

And as before you can access it throw arg2 but also the array like arguments[1].

---

When i say array like i mean:

It have some of the same abilities as an array:

The length property: .length (arguments.length).

The 0-index naming: [n] (arguments[0], arguments[1], …)

But none of the native array methods like sort, push, pop, splice.

Even more but 🙂 (And just a site note)

You can use array like objects in with native array method:

Lets say the arguments is like this: handler("a", "b", "c", "d")

and you only want the the 2th argument and higher:

var args = [].splice.call(arguments, 0, 1)

Now args is a native array with: ["b", "c", "d"].