纯JS更简单

Question

有没有办法获取触发事件的元素的ID？

我在想：

<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
    </script>
  </head>
  <body>
    <form class="item" id="aaa">
      <input class="title"></input>
    </form>
    <form class="item" id="bbb">
      <input class="title"></input>
    </form>
  </body>

</html>

除了var test应该包含id "aaa"，如果事件是从第一个表单触发，而"bbb"，如果事件是从第二个表单触发的话

Answer 1

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

Answer 2

供参考，试试吧！它有效！

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

Answer 3

虽然在其他帖子中有提及，但我想拼出这个：

$(event.target).id未定义

$(event.target)[0].id提供了id属性。

event.target.id也提供了id属性。

this.id提供了id属性。

和

$(this).id未定义。

当然，差异在于jQuery对象和DOM对象。 “id”是一个DOM属性，因此您必须在DOM元素对象上才能使用它。

（它绊倒了我，所以它可能绊倒了其他人）

Answer 4

对于所有事件，不仅限于jQuery，您可以使用

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

event.target失败的地方，对于IE，它会回到event.srcElement。澄清上面的代码不需要jQuery，但也适用于jQuery。

Answer 5

您可以使用(this)来引用触发该函数的对象。

当你在一个回调函数里面（在jQuery的上下文中）时，

'this'是一个 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

在事件属性

中触发事件的元素

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div>
 <i class="fa fa-bookmark"></i>
 <i class="fa fa-angle-double-up"></i>
  <span> Major </span>
  <i class="fa fa-pencil"></i>
</div>

我们获得 DOM节点对象，其中设置了事件处理程序。

我们在

中开始冒泡过程的大多数嵌套节点

cmds

事件对象始终是事件处理程序的第一个属性，例如：

event.currentTarget

有关活动委派的更多信息您可以阅读http://maciejsikora.com/standard-events-vs-event-delegation/

Answer 8

作为jQuery对象的source元素应该通过

获得

var $el = $(event.target);

这可以获得点击的来源，而不是点击功能也被分配的元素。当click事件在父对象上时可能很有用 EG.a表行上的单击事件，您需要单击的单元格

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

Answer 9

您可以尝试使用：

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

Answer 10

对于委派的事件处理程序，您可能会遇到以下情况：

<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()则返回所有匹配的后代。

Answer 11

使用可以使用.on事件

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

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

Answer 13

这比上面答案中提到的事件参数更高z-index：

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

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

这样，您将始终获得（在此示例中为id）元素的li。此外，当点击父...的子元素时..

Answer 14

this.element.attr("id")在IE8中运行良好。

Answer 15

这两项都有效，

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

和

alert(this.id);

Answer 16

只需使用this参考

即可

$(this).attr("id")

或

$(this).prop("id")

Answer 17

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

Answer 18

纯JS更简单

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

<form class="item" id="aaa">
  <input class="title"/>
</form>
<form class="item" id="bbb">
  <input class="title"/>
</form>

Answer 19

您可以使用该功能获取已更改项目的ID和值（在我的示例中，我使用了Select标记。

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

Answer 20

这适用于大多数类型的元素：

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

Answer 21

我正在与

jQuery自动完成

我尝试如上所述查找this.element.attr("id")，但是当请求函数触发时，它似乎不可用。我改用push来获取元素的ID，它似乎可以正常工作。

Answer 22

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

Answer 23

已经有很多方法可以做到这一点和示例，但是如果您需要采取进一步的措施并且需要防止在表单上使用回车键，而仍然需要在多行文本区域中使用它，它将变得更加复杂。以下将解决问题。

<script>
    $(document).ready(function() {
      $(window).keydown(function(event){
        if(event.keyCode == 13) {
           //There are 2 textarea forms that need the enter key to work.
            if((event.target.id="CommentsForOnAir") || (event.target.id="CommentsForOnline"))
            {
                // Prevent the form from triggering, but allowing multi-line to still work.
            }
            else
            {
                event.preventDefault();
                return false;
            }         
        }
      });
    });
</script>

<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>

可以进一步简化它，但是您明白了。

获取触发事件的元素的ID

23 个答案:

纯JS更简单