Question

Am a little confused about the javascript object,say I have the DOM below

<div class='of'></div>
<div class='of'></div>
<div class='of'></div>
<div class='of'></div>

 //select all of them 
  var fof = $('.of')

So fof is an array with 4 DOM object right? Can I treat the fof as javascript object ,and define some method like:

fof = {
  open:function(){

   }
 }

And is it possible to define some ‘action’ for fof; like click dblclick, so when the ‘action’ happens (like a event handler),call some method! in steady of hard coding

fof.click(function(){

})

How can I do that?

Answer 1

Ok, first the basics. In Javascript, functions are first class objects. That means that you can do:

var foo = function() { return 1 + 1;};

the same way you can do:

var foo = 5;

In Javascript, all true objects (pretty much everything except primitives) have properties. These properties can be set to anything that a variable can be set to:

var foo = {};
foo.bar = function() { return 1 + 1; }
foo.baz = 5;

Whenever you see a method being used on an object, you’re just seeing the function that was set as a property being run.

Since the jQuery results object (eg. $('.of')), which by the way is more than just an array, is a Javascript object, it can have properties, and those properties can be functions. So you absolutely can do:

var fof = $('.of')
fof.foo = function() { return 1 + 1; };
fof.foo();

Finally, you asked about making your own jQuery-like events. This is very easy to do using jQuery. Here’s a quick example:

var fakeObject = {};
fakeObject.fakeMethod = function() {
    // do something 
    $.trigger(this, 'myFakeClick');
}

var fakeObjectWatcher = {}
fakeObjectWatcher.react = function() { alert('someone did something'); };
$(fakeObject).on('myFakeClick', fakeObjectWatcher.react);

fakeObject.fakeMethod(); // triggers myFakeClick event
// fakeObjectWatcher will now alert "someone did something"