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

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

1518605 次浏览

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

当您在回调函数中(在jQuery的上下文中)时,'this'DOM元素,例如,被Click、each、bind等方法调用。

在这里你可以学到更多:http://remysharp.com/2007/04/12/jquerys-this-demystified/

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

我在数据库中动态生成一个表,以JSON格式接收数据并将其放入表中。每个表行都有一个唯一的ID,这是进一步操作所需要的,所以,如果DOM被更改,你需要一种不同的方法:

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

作为jQuery对象的源元素应通过以下方式获得

var $el = $(event.target);

这将为您提供单击的来源,而不是单击函数分配的元素。当单击事件位于父对象上时可能很有用Eg. a表格行上的单击事件,您需要单击的单元格

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

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

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

event.target失败时,它会回到IE的event.srcElement。要澄清上述代码不需要jQuery,但也可以使用jQuery。

您可以尝试使用:

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

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

$(event.target).id未定义

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

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

this.id给出id属性。

$(this).id未定义。

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

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

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

这适用于比上述答案中提到的事件参数更高的z-index

$("#mydiv li").click(function(){
ClickedElement = this.id;alert(ClickedElement);});

这样,您将始终获得(在此示例中为li)元素的id。此外,当单击父元素的子元素时…

这两个工作,

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

alert(this.id);
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这里.

在委托事件处理程序的情况下,你可能有这样的东西:

<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())向下搜索。使用.closest()时,你不需要使用.first(),因为它只返回第一个匹配的祖先元素,而.find()返回所有匹配的后代。

只需使用this引用

$(this).attr("id")

$(this).prop("id")

使用可以使用. on事件

  $("table").on("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/

您可以使用该函数来获取更改项的id和值(在我的示例中,我使用了选择标记。

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

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

$('selector').on('click',function(e){log(e.currentTarget.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>
$(".classobj").click(function(e){console.log(e.currentTarget.id);})

纯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>

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

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

它可能会被简化,但你得到的概念。

您可以简单地使用:

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

$(event.target).attr("id");

但是$(this).attr("id")将返回事件监听器附加到的元素的ID。

而当我们使用$(event.target).attr("id")时,这将返回单击的元素的ID。
例如,在<div>中,如果我们有一个<p>元素,那么如果我们单击“div”$(event.target).attr("id")将返回<div>的ID,如果我们单击“p”,那么$(event.target).attr("id")将返回<p>的ID。
你可以根据自己的需要使用它。