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

Question

イベントを発生させる要素の 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>

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

Answer 1

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

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

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

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

Answer 2

参考にしてみてください！できます！

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

Answer 3

他の投稿でも言及されていますが、私はこれを綴りたいと思いました：

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

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

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

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

と

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

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

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

Answer 4

jQueryだけでなく、すべてのイベントに使用できます

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

失敗した場合は、IEevent.targetにフォールバックします。event.srcElement上記のコードを明確にするために、jQuery は必要ありませんが、jQuery でも機能します。

Answer 5

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

'this'(jQuery のコンテキストで) コールバック関数の内部にいるときのDOM要素です。たとえば、click、each、bind などのメソッドによって呼び出されます。

詳細については、こちらをご覧ください: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Answer 6

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

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

Answer 7

eventプロパティにあるイベントを発生させた要素

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/を参照してください。

Answer 8

jQuery オブジェクトとしてのソース要素は、次の方法で取得する必要があります。

var $el = $(event.target);

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

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

Answer 9

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

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

Answer 10

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

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

Answer 11

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

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

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

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

Answer 12

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 を作業します。

Answer 13

this参考書を使うだけ

$(this).attr("id")

また

$(this).prop("id")

Answer 14

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

Answer 15

これらの両方が機能し、

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

と

alert(this.id);