이벤트를 발생시킨 요소의 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'A는 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에 있습니다. 테이블 행의 클릭 이벤트이며 클릭 한 셀이 필요한 경우에 유용합니다.

$("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의 내용이로 감싸 져 있기 때문에 itemId가 발견 될 가능성이 높습니다 <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 태그를 사용했습니다).

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