CODEWITHSUNDEEP
jquery
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13402

Passing "el" inside jQuery function?

This is obviously very common, I cannot find a clear explanation of passing "el" inside a function.

I just really want to fully wrap my head around it, I am getting much better at jQuery it's exciting but I want to understand this more.

I toyed with using "e" or "event" inside an event function and understand it to a degree.

EX:

    jQuery('a').click(function(event) {
        event.preventDefault();

        $('<div/>').append('default ' + event.type + ' prevented').appendTo('#log2');

    });

This returns this string of text "default click prevented" so I now understand why you pass event it's so you can refer to the event inside. right?

Well that makes sense, I still need more practice with that, but I am not sure about "el" at all.

Ex: if I wrote a function like this.

    var app = {
        add: function (el) {
            $('<div/>').append('default ' + el.type + ' prevented').appendTo('#log1');
        }
    }

    jQuery('.add').click(function (e) {
        e.preventDefault();
        app.add(this);
    });

Obviously thats wrong because "el" is not a "type" but I am trying to play with it to wrap my head around it, is it to get the index of an object?

I may have better luck if I knew what this method is called because I am having trouble finding information on this due to lack of terminology. I know the first example is "passing an elements event" not so sure when its like this, pretty sure its to refer to the object or something?

Here is a fiddle maybe you can modify it so I can study it jsfiddle

Upvotes: 0

Views: 164

Answers (2)

Kiran
Kiran

Reputation: 20313

You are passing DOM object. this in the code refers to 

<a class="add" href="#">Add</a>

Try below code snippet to catch event type:

jQuery('.add').click(function (e) {
        e.preventDefault();
        app.add(e);
    });

DEMO FIDDLE

Upvotes: 1

adeneo
adeneo

Reputation: 318182

el usually means element(s), and el.type would get the element type, like text, number etc. if the element looked like :

<input type="text" />

so it's a reference to a DOM nodelist/element in most cases, but it's just a variable, so it could mean anything, but in this case it's clearly a DOM element being passed in :

app.add(this);

Upvotes: 4

Related Questions