是否有任何方法可以获取触发事件的元素的ID？
我在想：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<script type="text/javascript" src="starterkit/jquery.js">
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
var test = caller.id;
alert(test.val());
});
});
</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"，如果事件是从第一个窗体激发的，则包含id "aaa"；如果事件是从第二个窗体激发的，则包含"bbb"。
在jquery中，event.target总是指触发事件的元素，其中event是传递给函数的参数。http://api.jquery.com/category/events/event-object(类别/事件/事件对象)/
1
2
3
4
5
| $(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
}); |
还要注意，this也可以工作，但它不是jquery对象，因此如果您希望对其使用jquery函数，则必须将其称为$(this)，例如：
1
2
3
4
5
6
| $(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
}); |
作为参考，试试这个！它起作用了！
1
2
3
4
| 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
1
2
| var target = event.target || event.srcElement;
var id = target.id |
当event.target失败时，它就落在event.srcElement上。为了澄清上述代码，不需要jquery，但也可以与jquery一起使用。
您可以使用(this)引用启动函数的对象。
当您在回调函数(jquery的上下文中)内时，'this'是一个dom元素，例如，由click、each、bind等方法调用。
以下是您可以了解更多信息的地方：http://remysharp.com/2007/04/12/jquerys-this-demystalized/
我动态地生成一个数据库中的表，接收JSON中的数据并将其放入一个表中。每个表行都有一个唯一的ID，这是进一步操作所必需的，因此，如果修改了DOM，则需要使用不同的方法：
1
2
3
4
| $("table").delegate("tr","click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
}); |
在事件属性中激发事件的元素
我们得到了设置了事件处理程序的DOM节点对象。
开始冒泡过程的大多数嵌套节点
事件对象始终是事件处理程序的第一个属性，例如：
1
2
3
4
5
6
| document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
}); |
有关事件委派的详细信息，请访问http://maciejsikora.com/standard-events-vs-event-delegation。/
作为jquery对象的源元素应该通过
1
| var $el = $(event.target); |
这将使您获得单击的源，而不是为单击函数分配的元素。当Click事件位于父对象上时非常有用例如，表行上的单击事件，您需要单击的单元格
1
2
3
| $("tr").click(function(event){
var $td = $(event.target);
}); |
您可以尝试使用：
1
2
3
4
| $('*').live('click', function() {
console.log(this.id);
return false;
}); |
在委托事件处理程序的情况下，您可能会有如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <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代码是这样的：
1
2
3
4
5
6
7
8
| $(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId = $target.data('id');
//do something with itemId
});
}); |
您很可能会发现itemID是undefined，因为li的内容被包装在中，这意味着可能是事件目标。你可以用一张小支票来解决这个问题，比如：
1
2
3
4
5
6
7
8
| $(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包装调用重复)：
1
2
3
4
5
6
7
8
9
10
11
| $(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()返回所有匹配的后代。
使用可以在事件中使用.
1
2
3
4
| $("table").on("tr","click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
}); |
这在比上述答案中提到的事件参数更高的z-index上工作：
1
2
3
4
5
| $("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
}); |
这样，您将始终获得(在本例中为li元素)的ID。也可以单击父元素的子元素。
1
2
3
4
5
6
7
8
9
| 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);
} |
在这里工作。
在IE8中，this.element.attr("id")工作正常。
只需使用this参考
或
这两项工作，
1
| jQuery(this).attr("id"); |
和
您可以使用函数获取更改项的ID和值(在我的示例中，我使用了一个select标记)。
1
2
3
4
5
6
7
| $('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
); |
这适用于大多数类型的元素：
1
2
3
| $('selector').on('click',function(e){
log(event.currentTarget.id);
}); |
对于角7.x，可以获取本机元素及其ID或属性。
1
2
3
4
5
| myClickHandler($event) {
this.selectedElement = <Element>$event.target;
console.log(this.selectedElement.id)
this.selectedElement.classList.remove('some-class');
} |
HTML：
我正在和
jQuery Autocomplete
我试着像上面描述的那样寻找一个event，但是当请求函数触发时，它似乎不可用。我用EDOCX1[1]来获取元素的ID，它看起来工作得很好。
