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

Verwenden Sie können Verwenden Sie .on event

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

Answer 2

Im Fall von delegierten Ereignishandlern, wo Sie etwas wie dieses haben könnten:

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

und Ihren JS-Code wie folgt:

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

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

Sie werden höchstwahrscheinlich feststellen, dass itemId undefined da der Inhalt des LI in eine Hülle aus <span> was bedeutet, dass die <span> wird wahrscheinlich das Ziel der Veranstaltung sein. Sie können dies mit einer kleinen Prüfung umgehen, etwa so:

$(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
    });
});

Oder, wenn Sie es vorziehen, die Lesbarkeit zu maximieren (und auch unnötige Wiederholungen von jQuery-Wrapping-Aufrufen zu vermeiden):

$(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
    });
});

Wenn Sie die Ereignisdelegation verwenden, wird die .is() Methode ist von unschätzbarem Wert, wenn es darum geht, zu überprüfen, ob Ihr Ereignisziel (neben anderen Dingen) tatsächlich das ist, was Sie brauchen. Verwenden Sie .closest(selector) um im DOM-Baum nach oben zu suchen, und verwenden Sie .find(selector) (in der Regel gekoppelt mit .first() wie in .find(selector).first() ), um es zu durchsuchen. Sie brauchen nicht zu verwenden .first() bei Verwendung von .closest() da es nur das erste übereinstimmende Vorgängerelement zurückgibt, während .find() gibt alle passenden Nachfahren zurück.

Answer 3

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

Answer 4

Dies funktioniert auf einer höheren z-index als die in den obigen Antworten genannten Ereignisparameter:

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

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

Auf diese Weise erhalten Sie immer die id der (in diesem Beispiel li ) Element. Auch wenn auf ein untergeordnetes Element des übergeordneten Elements geklickt wird

Answer 5

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 arbeiten aquí .