Uzyskiwanie identyfikatora elementu, który wywołał zdarzenie

Czy jest jakiś sposób na uzyskanie identyfikatora elementu, który uruchamia zdarzenie?

Myślę o czymś takim:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

Z wyjątkiem oczywiście tego, że var testpowinien zawierać identyfikator "aaa", jeśli zdarzenie jest uruchamiane z pierwszej formy, i "bbb"jeśli zdarzenie jest uruchamiane z drugiej postaci.

W jQuery event.targetzawsze odnosi się do elementu, który wywołał zdarzenie, gdzie eventparametr jest przekazywany do funkcji. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Zauważ też, że thisto również zadziała, ale nie jest to obiekt jQuery, więc jeśli chcesz użyć na nim funkcji jQuery, musisz się do niego odwołać $(this)np .:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

W celach informacyjnych spróbuj tego! To działa!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

Chociaż jest to wspomniane w innych postach, chciałem to przeliterować:

$(event.target).id jest niezdefiniowany

$(event.target)[0].id daje atrybut id.

event.target.id daje również atrybut id.

this.id daje atrybut id.

i

$(this).id jest niezdefiniowany.

Różnice dotyczą oczywiście obiektów jQuery i obiektów DOM. „id” jest właściwością DOM, więc aby go użyć, musisz być w obiekcie elementu DOM.

(Potknęło mnie to, więc prawdopodobnie potknęło się o kogoś innego)

Dla wszystkich zdarzeń, nie ograniczając się tylko do jQuery, którego możesz użyć

var target = event.target || event.srcElement;
var id = target.id

W przypadku event.targetniepowodzenia wraca event.srcElementdo IE. Wyjaśnienie powyższego kodu nie wymaga jQuery, ale działa również z jQuery.

Można użyć (this)do odwołania do obiektu, który uruchomił funkcję.

'this'jest elementem DOM, gdy znajdujesz się w funkcji wywołania zwrotnego (w kontekście jQuery), na przykład wywoływana metodami click, each, bind itp.

Tutaj możesz dowiedzieć się więcej: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Dynamicznie generuję tabelę z bazy danych, odbieram dane w JSON i umieszczam je w tabeli. Każdy wiersz tabeli ma unikalny element ID, który jest potrzebny do dalszych działań, więc jeśli DOM zostanie zmieniony, potrzebujesz innego podejścia:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

Element, który wywołał zdarzenie, które mamy we właściwości zdarzenia

event.currentTarget

Otrzymujemy obiekt węzła DOM, dla którego ustawiono obsługę zdarzeń.

Najczęściej zagnieżdżony węzeł, w którym rozpoczęliśmy proces propagacji

event.target

Obiekt zdarzenia jest zawsze pierwszym atrybutem modułu obsługi zdarzeń, przykład:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

Więcej informacji na temat delegowania wydarzeń można znaleźć na stronie http://maciejsikora.com/standard-events-vs-event-delegation/

Element źródłowy jako obiekt jQuery powinien być uzyskany poprzez

var $el = $(event.target);

Otrzymasz źródło kliknięcia, a nie element, do którego przypisano funkcję kliknięcia. Może być przydatny, gdy zdarzenie click znajduje się na obiekcie nadrzędnym EG. Zdarzenie click w wierszu tabeli i potrzebujesz klikniętej komórki

$("tr").click(function(event){
    var $td = $(event.target);
});

Możesz spróbować użyć:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

działa to z większością typów elementów:

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

W przypadku obsługi zdarzeń delegowanych, gdzie możesz mieć coś takiego:

<ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

i twój kod JS tak:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Prawdopodobnie zauważysz, że itemId jest undefined, ponieważ zawartość LI jest owinięta w <span>, co oznacza, że <span>prawdopodobnie będzie to cel zdarzenia. Możesz obejść ten problem za pomocą małego czeku, takiego jak:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Lub, jeśli wolisz zmaksymalizować czytelność (a także uniknąć niepotrzebnego powtarzania wywołań zawijania jQuery):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

Podczas korzystania z delegowania zdarzeń .is()metoda ta jest nieoceniona w celu sprawdzenia, czy cel zdarzenia (między innymi) jest faktycznie tym, czego potrzebujesz. Użyj, .closest(selector)aby wyszukać drzewo DOM i użyj .find(selector)(zwykle w połączeniu z .first(), jak w .find(selector).first()), aby przeszukać to drzewo . Nie musisz używać .first()podczas używania .closest(), ponieważ zwraca tylko pierwszy pasujący element przodka, podczas gdy .find()zwraca wszystkich pasujących potomków.

Use może użyć. Na zdarzenie

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

Działa to z-indexw przypadku parametru zdarzenia wyższego niż wspomniany w powyższych odpowiedziach:

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

W ten sposób zawsze otrzymasz idelement (w tym przykładzie li). Również po kliknięciu elementu potomnego elementu nadrzędnego ..

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

JSFiddle robocza tutaj .

Po prostu skorzystaj z thisreferencji

$(this).attr("id")

lub

$(this).prop("id")

this.element.attr("id") działa dobrze w IE8.

Obie te prace

jQuery(this).attr("id");

i

alert(this.id);

$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})

Możesz użyć tej funkcji, aby uzyskać identyfikator i wartość zmienionego elementu (w moim przykładzie użyłem tagu Select.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

Pracuję z

jQuery Autouzupełnianie

Próbowałem znaleźć eventopisany powyżej sposób, ale kiedy uruchamia się funkcja żądania, wydaje się, że nie jest dostępna. Kiedyś this.element.attr("id"), aby uzyskać identyfikator elementu zamiast, i wydaje się działać prawidłowo.

W przypadku Angulara 7.x można uzyskać element macierzysty oraz jego identyfikator lub właściwości.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

HTML:

<div class="list-item" (click)="myClickHandler($event)">...</div>