How to determine which HTML element and / or event called a function?

Question

How to determine which HTML element and / or event called a function?

Navigation

#1 by (8 votes)
#2 by (4 votes)

12

I have a function called by two different HTML elements and each of the elements calls the function through a certain event.

$("#tempoInicial").on("blur", manipulaTempoFinal);
$("#operadorTempo").on("change", manipulaTempoFinal);

function manipulaTempoFinal() {
    var tempoInicial = $("#tempoInicial");
    var operador = $("#operadorTempo");
    if (operador.val() == "4" && tempoInicial.val() != "") {
        tempoFinal.removeAttr("disabled");
        $("#tempoInicial, #operadorTempo").rules("remove", "skip_or_fill_minimum");
        $("#tempoInicial, #operadorTempo, #tempoFinal").rules("add", {
            require_from_group: [3, ".temposOperadorWeb"],
            messages: {
                require_from_group: "Ao entrar com tempo inicial e escolher o operador \"Entre\" o campo tempo final passa a ser obrigat&oacute;rio."
            }
        });
    } else {
        tempoFinal.attr("disabled", "disabled");
        tempoFinal.val("");
        $("#tempoInicial, #operadorTempo, #tempoFinal").rules("remove", "require_from_group");
        $("#tempoInicial, #operadorTempo").rules("add", {
            skip_or_fill_minimum: [2, ".temposOperadorWeb"],
            messages: {
                skip_or_fill_minimum: "Ao preencher o tempo inicial selecione o operador ou vice-versa."
            }
        });
    }
}

Is there any way in the lastManage function to identify who called it and / or what event?

javascript jquery

asked by anonymous 24.02.2014 / 21:14

2 answers

4

The keyword this will always have the reference to the element that triggered the event.

So, if within your function you call $(this) You get the reference with a jQuery envelope.

Has a good post on SO about this. Original text:

In jQuery, by default, this refers to the DOM element (not a jQuery object) which triggered an event. In the [code snippet above], it is still the same DOM element, only it is wrapped in a jQuery element by wrapping $() around it. As with any argument to the jQuery constructor, passing this into the constructor transforms it into a jQuery object.

Translating:

In jQuery, by default, the this keyword refers to the DOM element (not a jQuery object) that triggered an event. In the [code snippet above], it's still the same DOM element, only it's wrapped in a jQuery element by having $() around it. As with any argument to a jQuery constructor, passing this to the constructor transforms it into a jQuery object.

If you wanted to know which event was triggered, you can do it indirectly by passing an alias on the event call. Example:

$("#tempoInicial").on("blur", function(e) { manipulaTempoFinal('blur'); });

And the signature of your function might look like this:

function manipulaTempoFinal(pEvento)
[...]

24.02.2014 / 21:29

Receive external JSON data by PHP How to get MD5 from a file in Delphi?

score 8 · Accepted Answer

The jQuery event listeners receive a parameter with the reference to an object representing the event. This object has the attributes type and target , which contains the type of the event and the element that originally received the action, respectively.

In addition, within the function, the object represented by this refers to the element that is handling the event, not necessarily the same as where the event occurred, but may be one of its descendants.

Example:

function manipulador(e) {
    console.log('evento: ' + e.type);
    console.log('componente: ' + e.target);
}

$('input, select')
    .on('change', manipulador)
    .on('blur', manipulador);

Demo on Jsfiddle

However, here's another example:

<div>
<input/>
<select>
    <option>A</option>
    <option>B</option>
</select>
<div>

function manipulador(e) {
    console.log('evento: ' + e.type);
    console.log('componente: ' + e.target);
    console.log('componente: ' + this)
}

$('div')
    .on('change', manipulador)
    .on('blur', manipulador);

In this last example, the console result for a change event would be:

event: change

component: [object HTMLInputElement]

component: [object HTMLDivElement]

Note that target returned the input received event, while this returned the div that handled the event.