获取触发事件的元素的ID

2020/09/19 03:31 · javascript ·  · 0评论

有什么方法可以获取触发事件的元素的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>

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

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

尽管在其他帖子中提到了它,但我还是想说明一下:

$(event.target).id 未定义

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

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

this.id 给出id属性。

$(this).id 未定义。

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

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

对于所有事件,不仅可以使用jQuery,还可以使用

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

event.target失败,倒在event.srcElement了IE浏览器。为了澄清以上代码,不需要jQuery,但也可以使用jQuery。

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

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

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

我动态地从数据库中生成一个表,接收JSON中的数据并将其放入表中。每个表行都有一个唯一的ID,这是执行进一步操作所需的,因此,如果DOM更改,则需要使用不同的方法:

$("table").delegate("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/中阅读

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

var $el = $(event.target);

这将使您获得单击的来源,而不是单击功能也已分配的元素。当click事件在父对象EG上时很有用。表行上的click事件需要您单击的单元格

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

您可以尝试使用:

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

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

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

在委托事件处理程序的情况下,您可能会有类似以下内容:

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

undefined由于LI的内容包装在中<span>您很有可能会发现itemId为,这意味着<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()返回所有匹配的后代。

使用可以使用.on事件

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

这对高于z-index以上答案中提到的event参数的工作:

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

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

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

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

只需使用this参考

$(this).attr("id")

要么

$(this).prop("id")

this.element.attr("id") 在IE8中可以正常工作。

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

这两项工作,

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

alert(this.id);

您可以使用该函数获取更改项的ID和值(在我的示例中,我使用了Select标签。

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

纯JS更简单

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

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

我正在与

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>
本文地址:http://javascript.askforanswer.com/huoquchufashijiandeyuansudeid.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!