Abrufen der ID des Elements, das ein Ereignis ausgelöst hat

Question

Gibt es eine Möglichkeit, die ID des Elements zu erhalten, das ein Ereignis auslöst?

Ich denke da an etwas wie:

$(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>

Es sei denn natürlich, dass die var test sollte die id enthalten "aaa" wenn das Ereignis vom ersten Formular ausgelöst wird, und "bbb" wenn das Ereignis vom zweiten Formular ausgelöst wird.

Answer 1

Ich arbeite mit

jQuery Autocomplete

Ich habe versucht, nach einem event wie oben beschrieben, aber wenn die Anforderungsfunktion ausgelöst wird, scheint sie nicht verfügbar zu sein. Ich benutzte this.element.attr("id") um stattdessen die ID des Elements zu erhalten, und es scheint gut zu funktionieren.

Answer 2

Im Falle von Angular 7.x können Sie das native Element und seine id oder Eigenschaften erhalten.

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>

Answer 3

Es gibt bereits viele Möglichkeiten und Beispiele dafür, aber wenn Sie einen Schritt weiter gehen und die Eingabetaste in Formularen verhindern wollen, sie aber dennoch in einem mehrzeiligen Textbereich benötigen, wird es komplizierter. Das Folgende wird das Problem lösen.

<script>
    $(document).ready(function() {
      $(window).keydown(function(event){
        if(event.keyCode == 13) {
           //There are 2 textarea forms that need the enter key to work.
            if((event.target.id=="CommentsForOnAir") || (event.target.id=="CommentsForOnline"))
            {
                // Prevent the form from triggering, but allowing multi-line to still work.
            }
            else
            {
                event.preventDefault();
                return false;
            }         
        }
      });
    });
</script>

<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>

Es könnte wahrscheinlich noch weiter vereinfacht werden, aber Sie verstehen das Konzept.