首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在使用event.target时元素id不能获取?

在使用event.target时,元素id不能直接获取的原因是event.target返回的是触发事件的元素节点,而不是具体的元素id。event.target属性返回的是一个指向触发事件的元素的引用。通过该属性可以获取到元素的相关信息,比如标签名、类名、属性等,但是无法直接获取元素的id属性。

要获取元素的id,可以使用event.target属性的parentNode属性来获取触发事件的元素的父节点,然后再通过父节点的id属性来获取元素的id。

例如,假设我们有以下HTML代码:

代码语言:txt
复制
<div id="myDiv">
  <p id="myParagraph">Hello World!</p>
</div>

如果我们想要在点击p元素时获取其父元素div的id,可以使用以下JavaScript代码:

代码语言:txt
复制
document.getElementById('myParagraph').addEventListener('click', function(event) {
  var parentId = event.target.parentNode.id;
  console.log(parentId); // 输出:myDiv
});

在这个例子中,我们给p元素添加了一个点击事件的监听器。当点击p元素时,通过event.target属性获取到p元素的引用,然后通过parentNode属性获取到其父元素div的引用,最后通过id属性获取到div的id值。

注意,如果点击的元素本身就是目标元素(没有包含在其他元素内),那么event.target属性和event.currentTarget属性将是相同的,可以直接通过event.target.id来获取元素的id。

总结一下,使用event.target时,元素id不能直接获取,但可以通过event.target的父节点来获取元素的id。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • javascript当中mouseDown事件,mouseUp,和mouseClick执行顺序

    11.mouseDown事件,mouseUp,和mouseClick执行顺序 马克-to-win:下例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起,(比如这里document和span),一定是先执行所有元素的mouseDown事件,之后所有元素的mouseUp,之后执行所有元素的mouseClick。(有一点切记注意,本例子测试过程中不能用alert,如用alert,down事件后不会再执行click事件了。事件就被alert打断了。) 例 11.1 <html> <head>     <title>根据实验,本例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起,(比如这里document和span),一定是先执行所有元素的mouseDown事件,之后所有元素的mouseUp,之后执行所有元素的mouseClick</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <SCRIPT language=JavaScript>         function linkClickHandler(event) {         //    alert(event.srcElement+"is event.srcElement");         //    alert(event.target+"is event.target");             var t =event.srcElement||event.target;          //   alert(t.id+" qq1 ");             sss2.innerHTML += t.id+" click ";         }         function linkDownHandler(event) {        //     alert(event.srcElement+"ddddddddis event.srcElement");        //     alert(event.target+"is event.target");             var t =event.srcElement||event.target;        //     alert(t.id+" qq1 ");             sss2.innerHTML += t.id+" down ";         }         function documClickHandler(event) {         if (document.all) {         }else{        //     alert("event.currentTarget is "+event.currentTarget+" event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"); /*Event.CAPTURING_PHASE     1 Event.AT_TARGET     2 Event.BUBBLING_PHASE*/                      sss2.innerHTML += " event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"+" document click ";

    03

    javascript当中操纵table的用法

    2.操纵table 例 2.1(CreateSelectOptionEventPassParamIEFF.html) <HTML> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>     <TITLE></TITLE> </HEAD> <BODY id="bodyq">

                                                                                   
    11121314
    21222324
    </BODY> </HTML> <script>     function doimg(event)     {         var event = event || window.event;         var eSource =event.srcElement||event.target; /*马克-to-win:下列实验可以通过event取到。以下的实验证明event.target 就是obj,马克-to-win:event.target是最上层的元素,本例中onChange只有select有,而option并没有onChange这个概念。这就是为什么,event.target这个顶层元素是select,而不是option的原因。详情见例4.1.*/         var obj= document.getElementById("city");         alert("obj===event.target is"+ (obj===eSource));         var inde=eSource.selectedIndex;         alert(obj.value+inde);         change(inde,obj.value);     }

    00

    javascript当中attributes的用法

    3.attributes 例 3.1(getElementsByNameNodeListAttributeIEFF.html) <HTML> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </HEAD> <BODY>

    <FORM onClick="handleClick(event)">     <INPUT TYPE="checkbox" VALUE="A" NAME="BOX" id="BOX_A" checked="true">Selection A
        <INPUT TYPE="checkbox" VALUE="B" NAME="BOX" id="BOX_B">Selection B
        <INPUT TYPE="checkbox" VALUE="C" NAME="BOX" id="BOX_C">Selection C
        <INPUT TYPE="checkbox" VALUE="D" NAME="BOX" id="BOX_D">Selection D
    </FORM> <SCRIPT>     function handleClick(event)     {         myString='';         /* because there is no this method of getElementsByID, ID is unique          Document.getElementsByName() (Method)          An accessor method for retrieving objects from within the DOM hierarchy specifically according to their NAME value.          Property/method value type: NodeList object          JavaScript syntax: - myDocument.getElementsByName(aName)          Argument list: aName The name of the element to be retrieved          */ /*马克-to-win:event.target是最上层的元素,注意这里点击时,一定得点中方格里,如果点在方格外面,则event.target.id 是空值。*/            var event = event||window.event;               var eSource =event.srcElement||event.target;                 nodeListBox=document.getElementsByName("BOX");         /*Element.attributes[] (Collection)          A reference to a collection of attribute objects for the HTML tag that the Element object represents.          Property/method value type: Attributes object

    00
    领券