Javascript: Functions as properties

Question

Say I had code like so:

function on(loc,type,func){
    loc.addEventListener(type, function(e){
        func(e);
    });
}

If I called it like this:

on(document.getElementById('test'),"click",function(){
    alert('You clicked!');
});

It would work, but I want to be able to call the on function like so:

document.getElementById('test').on('click', function(){
    alert('You clicked!');
});

How can I make it able to be called like so?

`on` is not a property of DocumentElement. You can't do that. — mwilson, Apr 30 '15 at 01:12
It doesn't. It uses its own `$` function, which returns its own object, not document elements. — Barmar, Apr 30 '15 at 01:13
Provide the example that you're looking at. The above code is not jQuery. — mwilson, Apr 30 '15 at 01:13
jQuery has objects wrapped around the native element objects, which provides methods and other APIs for convenience. — Norman Breau, Apr 30 '15 at 01:14
`$("#foo")` is not the same as `document.getElementById('foo')`. — Barmar, Apr 30 '15 at 01:14
Are you doing Jquery or just plain javascript. I think thats what everyone is trying to figure out. Jquery has the ".on" function while javascript alone does not. — David Gilliam, Apr 30 '15 at 01:19
You *could* do `HTMLElement.prototype.on = function() { ... };`, **but** this is very frowned upon, and very bad practice. Modifying native objects could cause coding conflicts if different javascript libraries try to modify the prototype. — Norman Breau, Apr 30 '15 at 01:20
@NormanBreau Ok. That's what I need for my purposes, so thanks. However, I will avoid it in future, but for now I don't use libraries that often. — Oliver, Apr 30 '15 at 01:26
@DavidGilliam No I am not using jQuery. I am simply attempting to replicate one of it's functions. — Oliver, Apr 30 '15 at 02:52

score 1 · Accepted Answer · edited May 23 '17 at 11:58

As has been pointed out, the DocumentElement does not have an .on() method. Yet!

You can, however, add one by extending the prototype, adding a new property and making your function available on all Elements. This is quite easy (and I'll provide a trivial example in a moment), but it's also widely considered to be a bad practice. So before you try this out, understand that Javascript absolutely does make it possible...but that doesn't mean it's a good idea.

Now, that example:

Element.prototype.test = function() {
   console.log("Successfully extended the prototype of a native object!");
}

document.getElementById("footer").test();

score 0 · Answer 2 · answered Apr 30 '15 at 01:20

0

You cannot do this because the DocumentElement does not have a property (or allow you to create one (that I know of)) of your on function.

You could get away with doing something similar such as modifying your on function to handle the onlcick event for a given element. I haven't tested the below code but it should give you an idea:

function on (element) {
    var obj = {
        clickEvent : function () {
            element.onclick = function () {
                alert("you clicked");
            }
        }
    };
    return obj;

}

var theElement = document.getElementById("test");
on(theElement).clickEvent();

answered Apr 30 '15 at 01:20

mwilson

12,295
7
55
95

This doesn't suit my purposes and is essentially the same as what I was originally using. – Oliver Apr 30 '15 at 01:27
Actually, it's entirely possible to add such a thing (see my answer) but you don't often see it done because it tends to end badly :) – S McCrohan Apr 30 '15 at 01:28
Touche, S McCrohan. Touche. Although it isn't a good idea (as you and the original poster mentioned). – mwilson Apr 30 '15 at 01:32

Javascript: Functions as properties

2 Answers2