We Keep Coding

JQuery where does the data come from?

I have seen many JQuery functions using parameter function parameters. Even though I use them, It feels rather incomplete without knowing how this work in the back end.
as an example lets use the click method :
$("p").click(function(event){
event.preventdefault();
alert("testing 123");
});
In this code, if I used, "this" inside the method, it will give me the "p" element itself.
However, I cannot figure out the "event" parameter get assigned with something.
shouldn't there be some place with a code bit like
var event = blah blah;
so that the event parameter has some values?
I have clicked the actual JQuery file by pressing f12 and it goes to a function like this
jQuery.fn[ name ] = function( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
};
I cannot see any place of that filling or assigning something to the parameter named "event"
I have the same problem with $.ajax requests as well,
$.ajax({
type: "POST",
url: url,
async: false,
success: function (data) { }
});
It is visible that there is someplace loading the "data" in the "data" parameter, How and where does the actual data get filled up in? when do we load actual data.
I have seen a bit of similar problem.

The declaration happens in the function parameters themselves.
Declaring data, event, or whatever you want to call it inside the function parameters (any word will work), is effectively the var data = ... statement.
In the instance of an event handler, event is passed by the browser to any function latching on to that event. In the case of the ajax call, as #Alec said, that is the data returning from the server.

jQuery is basically a wrapper that returns an object with many methods. Most of them are not that straightforward, if you want to understand more deeply, you don't have many choices except using the console and going through the source code which you can find here: https://code.jquery.com/jquery-1.12.4.js. Ideally, use uncompressed version. For some methods, it can be quite long to get to the bottom of it. The way the Click callback works is hidden pretty deep.
You can find it this way:
In the console, enter $("p").click. You'll get:
ƒ ( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
}
Which comes from here in the source code:
jQuery.each( ( "blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error contextmenu" ).split( " " ),
function( i, name ) {
// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
};
} );
So because you have at least an argument, it runs: this.on( name, null, data, fn ), where this is your jQuery object $('p'), name is 'click', and data is your function(event). So onto this.on():
console.log($('p').on);
ƒ ( types, selector, data, fn ) {
return on( this, types, selector, data, fn );
}
Here, function on isn't global, so it's in jQuery's closure, so back to the source code where you can find:
function on( elem, types, selector, data, fn, one ) {
...
where elem is your jQuery object $('p'), types is 'click', selector is null, data is your function(e) and fn is null. This leads to:
elem.each( function() {
jQuery.event.add( this, types, fn, data, selector );
} );
So you can find:
jQuery.event = {
global: {},
add: function( elem, types, handler, data, selector ) {
...
Where you can find an addEventListener :
elem.addEventListener( type, eventHandle, false );
On addEventListener, the callback has the event parameter, which is native javascript. In jQuery, the callback is eventHandle, so let's find this one:
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== "undefined" &&
( !e || jQuery.event.triggered !== e.type ) ?
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
undefined;
};
So it returns the function dispatch, so now the callback is this :
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) , where arguments is e (the original addEventListener Event). So find dispatch:
dispatch: function( event ) {
// Make a writable jQuery.Event from the native event object
event = jQuery.event.fix( event );
...
So what is this event.fix:
fix: function( event ) {
if ( event[ jQuery.expando ] ) {
return event;
}
// Create a writable copy of the event object and normalize some properties
var i, prop, copy,
type = event.type,
originalEvent = event,
fixHook = this.fixHooks[ type ];
In here you find
event = new jQuery.Event( originalEvent );
jQuery.Event = function( src, props ) {
...
Where the event that is passed as a parameter of click is defined. You can test it by adding properties on jQuery.Event.prototype. Like this for example:
jQuery.Event.prototype.prop = 'newProp';
So, to sum up, the event in function(event), is an instance of jQuery.Event.
See
console.log($('p').click);
console.log($('p').on);
console.log(jQuery.Event)
jQuery.Event.prototype.prop = 'test';
$('p').click(function(event){console.log(event.prop)});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<p>test</p>
For Ajax, it's probably a bit more straightforward, but again, if you want to know exactly, not much else you can do but go through the source code.

In reference to your first question, about the event parameter, the event is your click. It will never be explicitly declared like a normal variable. It is just a parameter, and in your example the click is the event.
In reference to your ajax question, the data parameter is what is coming back from your backend after a successful post. For example, I use ajax calls to send some information from my frontend. My backend then uses that information to send back data to frontend inside that success: function(data), like JSON. JSON would be the data parameter.

javascript module How to get the current object ( this referencing something else )?

I'm noticing that this references something else inside a function that I added as event listener. I read this informative resource and a few questions on stackoverflow but I don't know how to apply it to my case (I'm quite new to the "oop" and the module pattern in javascript so I'm a bit lost).
Here is my little module:
var myModule = myModule || ( function() {
// Adds event listener for all browsers
// see http://stackoverflow.com/a/6348597
function addEvent( element, event, listener ) {
// IE < 9 has only attachElement
// IE >= 9 has addEventListener
if ( element.addEventListener ) {
return element.addEventListener( event, listener, false );
} else if ( element.attachElement ) {
return element.attachElement( "on" + event, listener );
}
}
return {
init: function() {
// Add event listeners
addEvent(
document.getElementById( "myElementId" ),
"click",
this.processMyElement
);
addEvent(
document.getElementById( "myOtherElementId" ),
"click",
this.processMyOtherElement
);
},
hideElementById: function( elementId ) {
document.getElementById( elementId ).style.display = "none";
},
showElementById: function( elementId ) {
document.getElementById( elementId ).style.display = "block";
},
processMyElement: function() {
this.hideElementById( "myElementId" );
this.showElementById( "myOtherElementId" );
},
processMyOtherElement: function() {
// Do something else...
}
};
}() );
The thing is that this which I use to call hideElementById in processMyElement is referencing to the element I added an eventListener to, and not to the current object.
I tried a few things without success:
removing the return in addEvent,
using var that = this as a private property of the module (placed in the module before the addEvent definition) and using that in processMyElement
using apply in the init method but it (obviously) calls processMyElement when adding the listener to the element
Could anyone help me with this? I tried a few things but I cannot see how to do it better...
PS: I try to build testable code, that's why I had those hideElementById and showElementById methods, in order to separate various functionalities (that may be quite clumsy actually but that's where I am ATM...).

There are (more than) a couple of common ways to get the correct this binding. For example, you can use a closure:
var that = this;
addEvent(
document.getElementById( "myOtherElementId" ),
"click",
function () {
that.processMyOtherElement();
}
);
Or you could use bind:
addEvent(
document.getElementById( "myOtherElementId" ),
"click",
this.processMyOtherElement.bind(this)
);
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Which one you use would depend on other factors.

jQuery plug-in data access -- performance hit?

I'm writing a new jQuery plugin. For the guide, I am using their recommendation:
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});
// If the plugin hasn't been initialized yet
if ( ! data ) {
data = {
element : this,
target : $this,
tooltip : tooltip
};
$(this).data('tooltip', data);
}
methods.update.apply(data.element, 'Test');
},
update : function( content ) {
var $this = $(this),
data = $this.data('tooltip');
// check or change something important in the data.
private.test.apply( data.element );
return data.element;
}
};
var private = {
test: function() {
var $this = $(this),
data = $this.data('tooltip');
// again, do some operation with data
}
};
$.fn.tooltip = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
Its a little different from their version to make it shorter but also to show my differences. Basically, in the init, I am instantiating and creating data object that gets stored in the element. Part of the data object is the element itself:
element : this,
Then, after all of the initialization is done, I call a public method from the init (lets say I do it for functionality reuse purpose). To make the call, I use .apply() and provide the proper context (my element), which would match the context when the function is called externally:
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
This is fine and understandable. However, what I am unsure about is the performance of acquiring the data of the plugin from within a private or a public method. To me, it seems that at the top of every public and private method I have to execute the following lines in order to get the data:
var $this = $(this),
data = $this.data('tooltip');
Of course, I wouldn't execute them when I have no need for whatever is stored in data. However, my plugin performs quite a bit of animations and state tracking and almost all of the functions require access to the data. As such, it seems like accessing .data() in almost every private and public call is a pretty big performance hit.
My question is whether anyone uses this plug-in structure (I'm hoping that yes since jQuery recommends it) and has found a different way of referencing the data without hitting .data() in every function call.

Unbind an Anonymous Function

Can somebody tell how to "unbind" an anonymous function?
In jQuery it's capable to do that, but how can I implement this Functionality in my own script.
This is the scenario:
The following code attach a onclick event to the Div which have someDivId as ID, now when you click the DIV, it's showing 'clicked!'.
var a = document.getElementById('someDivId');
bindEvent(a,'click',function(){alert('clicked!');});
That's all great, the problem is how to "un-attach" the Function to the DIV if the function is anonymous or how to "un-attach" all attached events to the 'a' Element?
unBind(a,'click'); //Not necessarily the given params, it's just an example.
This is the code for bindEvent Method:
function bindEvent (el,evtType,fn){
if ( el.attachEvent ) {
el['e'+evtType+fn] = fn;
el[evtType+fn] = function(){
fn.call(el,window.event);
}
el.attachEvent( 'on'+evtType, el[evtType+fn] );
} else {
el.addEventListener( evtType, fn, false );
}
}

Finally, and after hours of Test&Errors i have found a solution, maybe it's not the best or most efficient but... IT WORKS! (Tested on IE9, Firefox 12, Chrome 18)
First all I'v create two cross-browser and auxiliary addEvent() and removeEvent() methods. (Idea taken from Jquery's source code!)
HELPERS.removeEvent = document.removeEventListener ?
function( type, handle,el ) {
if ( el.removeEventListener ) {
//W3C Standard
el.removeEventListener( type, handle, true );
}
} :
function( type, handle,el ) {
if ( el.detachEvent ) {
//The IE way
el.detachEvent( 'on'+type, el[type+handle] );
el[type+handle] = null;
}
};
HELPERS.addEvent = document.addEventListener ?
function( type, handle,el ) {
if ( el.addEventListener ) {
//W3C Standard
el.addEventListener( type, handle, true );
}
} :
function( type, handle,el ) {
if ( el.attachEvent ) {
//The IE way
el['e'+type+handle] = handle;
el[type+handle] = function(){
handle.call(el,window.event);
};
el.attachEvent( 'on'+type, el[type+handle] );
}
}
Also we need some kind of 'container' to store the attached events to elements, like this:
HELPERS.EVTS = {};
And finally the two callable and exposed to the users Methods:
The next one to add an Event(event) and associate this Event to a Method (handler) for a specific Element (el).
function bindEvent(event, handler,el) {
if(!(el in HELPERS.EVT)) {
// HELPERS.EVT stores references to nodes
HELPERS.EVT[el] = {};
}
if(!(event in HELPERS.EVT[el])) {
// each entry contains another entry for each event type
HELPERS.EVT[el][event] = [];
}
// capture reference
HELPERS.EVT[el][event].push([handler, true]);
//Finally call the aux. Method
HELPERS.addEvent(event,handler,el);
return;
}
Lastly the method that un-attach every pre-attached events (event) for an specific Element (el)
function removeAllEvent(event,el) {
if(el in HELPERS.EVT) {
var handlers = HELPERS.EVT[el];
if(event in handlers) {
var eventHandlers = handlers[event];
for(var i = eventHandlers.length; i--;) {
var handler = eventHandlers[i];
HELPERS.removeEvent(event,handler[0],el);
}
}
}
return;
}
By the way, to call this methods you must do the following:
Capture a DOM Node
var a = document.getElementById('some_id');
Call the method 'bindEvent()' with the corresponding parameters.
bindEvent('click',function(){alert('say hi');},a);
And to de-attach it:
removeAllEvent('click',a);
That's all, hope will be useful for somebody one day.

Personally (and I know this isn't the "best" way, as it does require me to think about what I'm doing), I like to just use the on* event properties of the element I'm working with.
This has the convenient upside of being able to quickly and easily detach events.
var a = document.getElementById('someDivId');
a.onclick = function() {alert("Clicked!");};
// later...
a.onclick = null;
However, you do have to be careful with this because if you try to add a second event handler it will overwrite the first. Keep that in mind and you should be all fine.

I'm not sure if you can unbind an anonymous function attached via javascript. If possible you can simple remove the element from the DOM and recreate it. This will get rid of any event handlers previously attached.

JavaScript provides no list of event listeners attached to a node.
You can remove all event listeners of a node but using the Node.cloneNode method, see here: https://developer.mozilla.org/En/DOM/Node.cloneNode
This clones the node (obviously) but it does not clone the event listeners attached to it.
You could also just bind empty functions as event listeners:
function noop() {}
bindEvent(myElement, "click", noop);

This is from jquery's source:
jQuery.removeEvent = document.removeEventListener ?
function( elem, type, handle ) {
if ( elem.removeEventListener ) {
elem.removeEventListener( type, handle, false );
}
} :
function( elem, type, handle ) {
if ( elem.detachEvent ) {
elem.detachEvent( "on" + type, handle );
}
};

Javascript: How to access object member from event callback function

I have some problems trying to figure out what is wrong with my object design.
var comment = function(){
var textarea = null;
$(document).ready( init );
function init()
{
$('.reply').click( comment.reply_to );
this.textarea = $('.commentbox textarea');
console.log( this.textarea ); // properly shows the textarea element
console.log( textarea ); // outputs null
}
function set_text( the_text )
{
console.log( textarea ); // outputs null
console.log( this.textarea ); // outputs undefined
textarea.val( the_text );
}
return {
reply_to: function()
{
console.log( this ); // outputs the element who fired the event
set_text( 'a test text' ); // properly gets called.
}
};
}();
When document is fully loaded, init() is automatically called and initializes the object. I must note that the textarea member properly points to the desired element.
A click event is attached to a "reply" button, so reply_to() function is called whenever user clicks on it.
So, this is what I don't understand:
* When using "this" is safe? Using it from reply_to() it is not, as it seems like the context is set to the caller element.
* Why I can call "set_text()" from reply_to, but I cannot access the "textarea" member?
* How I should do to access "textarea" member from reply_to() (which is an event callback)?

Since inside those handlers the context will change, it's easiest to keep a reference to the context you want, I personally prefer self. Here's one alternative format:
var comment = function(){
this.textarea = null;
var self = this;
$(document).ready( init );
function init()
{
$('.reply').click( reply_to );
self.textarea = $('.commentbox textarea');
}
function set_text( the_text )
{
self.textarea.val( the_text );
}
function reply_to() {
set_text( 'a test text' );
}
}();
You can test it here. Admittedly though I'm not really sure what you're trying to accomplish though. You are trying to return the reply_to function, but bind it yourself inside the init() ready handler...so you can either bind it immediately (like above), or change it up and return what you want to bind elsewhere.