有什么方法可以获取触发事件的元素的ID ?

我在想:

$(document).ready(function() { $(“a”).click(function() { VaR 测试 = caller.id; alert(test.val()); }); }); <script type=“text/javascript” src=“starterkit/jquery.js”></script> <表单类=“项目” id=“aaa”> <输入类=“标题”></input> </form> <表单类=“项目” id=“bb”> <输入类=“标题”></input> </form>

当然,除了var测试应该包含id“aaa”(如果事件是从第一个表单触发)和“bbb”(如果事件是从第二个表单触发)。


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

'this'是一个DOM元素,当你在回调函数中(在jQuery上下文中),例如,被click, each, bind等方法调用。

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


在jQuery事件中。Target总是指向触发事件的元素,其中event是传递给函数的参数。http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

还要注意的是,这也可以工作,但它不是一个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);

这将为您提供单击的源,而不是分配了单击函数的元素。当单击事件在父对象上时是否有用 如。表行上的单击事件,您需要被单击的单元格

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

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

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

事件的地方。目标失败,则返回事件。IE的srcElement。 澄清一下,上面的代码不需要jQuery,但也可以使用jQuery。


你可以试着用:

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

虽然在其他文章中提到过,但我还是想说清楚:

美元(event.target)。Id未定义

美元(event.target)[0]。Id给出Id属性。

id也给出了id属性。

这一点。Id给出Id属性。

and

(美元)。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");

and

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是未定义的,因为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()方法对于验证您的事件目标(以及其他事情)是否确实是您所需要的是非常宝贵的。使用. nearest (selector)向上搜索DOM树,使用.find(selector)(通常与.first()结合使用,如在.find(selector).first()中)向下搜索。使用. nearest()时不需要使用.first(),因为它只返回第一个匹配的祖先元素,而.find()则返回所有匹配的后代元素。


只要使用this引用

$(this).attr("id")

or

$(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标记)。

              $('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自动完成

我尝试寻找如上所述的事件,但当请求函数触发时,它似乎不可用。我使用this.element.attr(“id”)来获得元素的id,它似乎工作得很好。


以Angular 7为例。你可以得到原生元素和它的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 = 处理程序; bbb.onclick = 处理程序; 函数处理程序() { VaR 测试 = this.id; 控制台.log(测试) } <表单类=“项目” id=“aaa”> <输入类=“标题”/> </form> <表单类=“项目” id=“bb”> <输入类=“标题”/> </form>


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

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

Or

$(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。 所以根据你的需要使用它。