获取触发事件的元素的 ID

IT技术 javascript jquery dom-events
2021-01-25 02:30:04

有没有办法获取触发事件的元素的 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>

当然, vartest应该包含 id "aaa",如果事件是从第一种形式触发的,并且"bbb",如果事件是从第二种形式触发的。

6个回答

在 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");
    });
});
我使用 event.currentTarget.id , event.target.id 也可以是子元素
2021-03-12 02:30:04
哇!谢谢。没有意识到 jQuery 抽象得这么好。你摇滚!我认为它仍然会有 (this) 和 (event.target) 之间的区别——作为将事件绑定到的对象与接收事件的对象。
2021-03-21 02:30:04
@ZianChoy - 我不太确定你所说的“自定义属性”是什么意思,但$(event.target)如果你需要一个 jQuery 方法,你可以使用,例如$(event.target).attr("organisation:thingy");.
2021-04-03 02:30:04
请注意: event.target 是被点击真实项目。例如,如果您将一个单击事件绑定到一个 div,并且在该 div 内有一个 P 和一个 H2 元素 - event.target 将返回 H2 元素或 P,如果单击其中一个元素。“this”将真正返回您挂起事件的 div,无论您单击哪个子元素。
2021-04-03 02:30:04
不幸的是, event.target 不允许访问其自定义属性。要做到这一点,必须使用 $(this).attr("organization:thingy");。
2021-04-09 02:30:04

作为参考,试试这个!有用!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});
@dlackey 对我来说是一样的,另一个解决方案在我的 Firefox 12 上不起作用,但这个解决方案起作用了。谢谢
2021-03-19 02:30:04
请记住,如果您的点击事件是在一个有子e.target元素的元素上,即使它是一个子元素,它也会为您提供导致事件被触发的确切元素,而this将为您提供事件所附加的元素。
2021-03-20 02:30:04
@gemma 另一个解决方案对我不起作用,但这个解决方案对我有用。谢谢你迟到。
2021-03-28 02:30:04
最佳答案似乎不适用于获取嵌入式 SVG 中元素的 ID。$(this).attr("id");做。
2021-03-30 02:30:04

虽然在其他帖子中提到过,但我想说明一下:

$(event.target).id 未定义

$(event.target)[0].id 给出 id 属性。

event.target.id 还给出了 id 属性。

this.id 给出 id 属性。

$(this).id 未定义。

当然,区别在于 jQuery 对象和 DOM 对象之间。“id”是一个 DOM 属性,所以你必须在 DOM 元素对象上才能使用它。

(它绊倒了我,所以它可能绊倒了其他人)

对我来说,event.target.id什么都不给!
2021-03-17 02:30:04
$(event.target).attr('selector'); 非常适合我。
2021-03-19 02:30:04
@artaxerxe 这意味着您点击的元素没有 id :P; 也不要将 jquery 用于此类事情.... 使用事件 javascript 属性,因为它会更快。
2021-04-06 02:30:04

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

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

哪里event.target失败了,它就依赖event.srcElement于 IE。澄清上面的代码不需要 jQuery 但也适用于 jQuery。

不使用 jQuery 意味着运行更少的代码行,同时获得完全相同的结果,如上所示。jQuery 抽象了 js。这个是直接js回答,看大小!
2021-03-10 02:30:04
太棒了,真的帮助了我
2021-03-21 02:30:04
只使用'this'关键字不是更好,它总是会让您访问调用事件的元素的属性吗?
2021-03-22 02:30:04
只需要深入研究所有 jQuery 废话才能得到这个答案。谢谢。这比以往任何时候都更相关:needsmorejquery.com
2021-03-25 02:30:04

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

'this'当您处于回调函数内部时(在 jQuery 的上下文中)是一个DOM元素,例如,被 click、each、bind 等方法调用。

您可以在这里了解更多信息:http : //remysharp.com/2007/04/12/jquerys-this-demystified/

如果你有一个像$(html).click()(this)这样的函数将返回 html 对象而不是被点击的元素
2021-04-03 02:30:04