イベントを発生させた要素のIDを取得する

イベントを発生させる要素のIDを取得する方法はありますか？

私は次のようなものを考えています：

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

もちろん、最初のフォームからイベントが発生した場合、および2番目のフォームからイベントが発生した場合、var testにはidが含まれる必要があります。"aaa""bbb"

jQueryではevent.target常に、イベントをトリガーした要素を指しeventます。ここで、は関数に渡されるパラメーターです。http://api.jquery.com/category/events/event-object/

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

これもthis機能しますが、jQueryオブジェクトではないので、jQuery関数を使用したい場合は、次のように参照する必要があります$(this)。

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

参考までに、これを試してください！できます！

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

それは他の投稿で言及されていますが、私はこれを詳しく説明したいと思いました：

$(event.target).id 未定義です

$(event.target)[0].id id属性を指定します。

event.target.id id属性も指定します。

this.id id属性を指定します。

そして

$(this).id 未定義です。

もちろん、jQueryオブジェクトとDOMオブジェクトには違いがあります。「id」はDOMプロパティであるため、それを使用するにはDOM要素オブジェクトにアクセスする必要があります。

（それは私をつまずかせたので、おそらく他の誰かをつまずかせた）

使用できるjQueryだけに限定されないすべてのイベント

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

どこでevent.targetそれが背中に落ちる失敗するevent.srcElementIE用。上記のコードを明確にするために、jQueryは必要ありませんが、jQueryでも機能します。

を使用(this)して、関数を起動したオブジェクトを参照できます。

'this'あるDOMそれぞれ、あなたが内側（jQueryのの文脈で）コールバック関数のある場合には、例えば、クリックによって呼び出される要素、バインドなどの方法。

詳細はここにあります：http : //remysharp.com/2007/04/12/jquerys-this-demystified/

データベースから動的にテーブルを生成し、JSONでデータを受け取ってテーブルに入れます。すべてのテーブル行には、ID以降のアクションに必要な一意のがあるため、DOMが変更された場合は別のアプローチが必要です。

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

イベントプロパティでイベントを発生させた要素

event.currentTarget

イベントハンドラが設定されたDOMノードオブジェクトを取得します。

私たちが持っているバブリングプロセスを開始した最もネストされたノード

event.target

イベントオブジェクトは常にイベントハンドラーの最初の属性です。例：

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

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

});

イベントの委任の詳細については、http：//maciejsikora.com/standard-events-vs-event-delegation/を参照してください。

jQueryオブジェクトとしてのソース要素は、

var $el = $(event.target);

これにより、クリック機能も割り当てられた要素ではなく、クリックのソースが取得されます。クリックイベントが親オブジェクト（テーブル行のクリックイベントなど）であり、クリックされたセルが必要な場合に役立ちます。

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

あなたが使用しようとすることができます：

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

これはほとんどのタイプの要素で機能します。

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

委任されたイベントハンドラーの場合、次のようなものがあります。

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

そしてあなたのJSコードはそうです：

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

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

undefinedLIのコンテンツはにラップされているため<span>、<span>おそらくitemIdがイベントターゲットになるため、itemIdがであることがわかります。次のような簡単なチェックでこれを回避できます。

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

または、読みやすさを最大化したい場合（および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
    });
});

イベントの委任を使用する場合、この.is()メソッドは、（とりわけ）イベントターゲットが実際に必要なものであることを確認するために非常に役立ちます。を使用.closest(selector)してDOMツリーを上方向に検索し、を使用して.find(selector)（一般にと.first()同様に.find(selector).first()）、下方向に検索します。を使用する.first()場合.closest()は、最初に一致する祖先要素のみを返し、一致する.find()すべての子孫を返すため、を使用する必要はありません。

.onイベントを使用できます

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

これz-indexは、上記の回答で述べたイベントパラメータよりも高い値で機能します。

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

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

このようにしてid、（この例ではli）要素のを常に取得します。また、親の子要素をクリックしたとき。

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を動作させます。

this参照を使用するだけ

$(this).attr("id")

または

$(this).prop("id")

this.element.attr("id") IE8で正常に動作します。

これらの両方が機能し、

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

そして

alert(this.id);

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

関数を使用して、変更されたアイテムのIDと値を取得できます（この例では、Selectタグを使用しました。

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

私は一緒に働いています

jQueryオートコンプリート

event上記のように探してみましたが、リクエスト機能が発火しても利用できないようです。私が使用this.element.attr("id")代わりに、要素のIDを取得するには、それが正常に動作しているようです。

Angular 7.xの場合、ネイティブ要素とそのIDまたはプロパティを取得できます。

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>