有什么方法可以获得触发事件的元素的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"
,如果事件是由第二个表单触发。
在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.target).id
未定义。
$(event.target)[0].id
给出了id属性。
event.target.id
也给出了id属性。
this.id
给出了id属性。
而 "event.target.id "也给出了id属性。
$(this).id
是未定义的。
当然,区别在于jQuery对象和DOM对象之间。 "id".是一个DOM属性,所以你必须在DOM元素对象上才能使用它。 是一个DOM属性,所以你必须在DOM元素对象上才能使用它。
(它绊住了我,所以可能绊住了别人)
在event属性中,我们有一个触发事件的元素。
event.currentTarget
我们得到DOM节点对象,并在其上设置了事件处理程序。
我们有的最多的嵌套节点开始冒泡的过程,在
event.target
事件对象总是事件处理程序的第一个属性,例如:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
。
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
更多关于活动代表团的信息您可以阅读http://maciejsikora.com/standard-events-vs-event-delegation/
在委托事件处理程序的情况下,你可能会有这样的东西。
<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()
)来向下搜索。
在使用.close()
时,你不需要使用.first()
,因为它只返回第一个匹配的祖先元素,而.find()
则返回所有匹配的后裔。
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[此处](
)。