JQuery where does the data come from?

jquery get data attribute value from element
jquery data
jquery data selector
jquery data not working
jquery data undefined
jquery update data attribute
html data attribute jquery
jquery data example

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.data(), data() method has already retrieved them. The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular  The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page.

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>

event.data, Description: An optional object of data passed to an event method when the current executing handler is bound. version added: 1.1event.data. Example: Within a  Prior to jQuery 1.4.3, .data( obj ) completely replaced all data. Since jQuery 1.4.3, data is instead extended by shallow merge. Since jQuery 1.4.3, data is instead extended by shallow merge. Since jQuery 3 , every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the HTML dataset API .

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.

.data(), data( "name", undefined ) will return the jQuery object that it was called on, allowing for chaining. Example: Store then retrieve a value from the div element. 1. jQuery does not store only user-created data in that cache. It also stores internal information and the event handling functions that you attach with live(), bind() and delegate(). Having centralized data storage makes jQuery's codebase much more robust and bug free, something that we all can benefit from.

jQuery's Data Method - How and Why to Use It, Having centralized data storage makes jQuery's codebase much more robust and bug free, something that we all can benefit from. To Wrap it Up. Certain jQuery object methods retrieve specific values (instead of modifying state). An example of this is the val() method, which returns the current value of a text input element. In these cases, a statement such as $('#user-email').val() cannot be used for chaining as the return value does not reference a jQuery object. Creating new DOM elements

"get json with jquery" - where does data come from, Where does the JSON data come from in this exercise #249? The code is $.​getJSON("/json/cats.json", function(json)  .data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. .dequeue() Execute the next function on the queue for the matched elements.

jQuery event.data Property, Example. Return the data passed with the on() method for each <p> element: alert("The " + $(this).index() + ". paragraph has data: " + event.data.x); }); });. jQuery Introduction The jQuery team knows all about cross-browser issues, and they have written this knowledge into the jQuery library. jQuery will run exactly

Comments
  • Have a look at: How to explain callbacks in plain english? How are they different from calling one function from another function? (the highest voted answer) and javascript - How do I return the response from an asynchronous call?
  • Possible duplicate of How to explain callbacks in plain english? How are they different from calling one function from another function?