รับ 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>

ยกเว้นหลักสูตรที่ 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.srcElementสำหรับ IE เพื่อชี้แจงรหัสข้างต้นไม่จำเป็นต้อง 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);

สิ่งนี้ทำให้คุณได้รับแหล่งที่มาของการคลิกมากกว่าองค์ประกอบที่กำหนดฟังก์ชั่นการคลิกด้วย จะมีประโยชน์เมื่อเหตุการณ์คลิกอยู่บนวัตถุแม่ EG.a เหตุการณ์คลิกในแถวตารางและคุณต้องการเซลล์ที่ถูกคลิก

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

คุณจะพบว่า itemId เป็นundefinedมากกว่าเพราะเนื้อหาของ LI นั้นถูกห่อหุ้มด้วย<span>ซึ่งหมายความว่า<span>อาจจะเป็นเป้าหมายของเหตุการณ์ คุณสามารถแก้ไขปัญหานี้ได้ด้วยการตรวจสอบขนาดเล็กเช่น:

$(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').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 คุณจะได้รับองค์ประกอบพื้นฐานและรหัสหรือคุณสมบัติ

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>