首页
学习
活动
专区
工具
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。

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

相关·内容

  • 为什么 RedHat Linux 5 下不能使用 ifconfig 命令

    我安装完 RedHat Linux 5 之后,终端使用一些命令,如: ifcinfig 查看本机的IP,发现不能使用此命令,提示说“command not found”,这该怎么办呢 想想肯定是环境变量没有加载...,那就动手修改一下环境变量,修改如下: 1、初始安装完成系统之后,系统为了更加安全,有些命令的路径没有PATH环境变量中,可以用echo $PATH命令查询得知,添加路径到PATH环境变量的方法如下...1)如果只想在本次开机过程中临时性的添加修改,下次开机就无效的话,可以: 输入export PATH=$PATH:/sbin (2)如果只给当前用户永久添加,则: ~...(3)如果给系统中所有的用户都永久添加,则: /etc/profile文件末尾添加export PATH=$PATH:/sbin 文件修改并保持完以后,运行source etc...系统启动好之后,试试终端使用命令,看看有没有生效吧。

    1.4K00

    Mybatis使用generatedKey插入数据返回自增id始终为1,自增id实际返回到原对象当中的问题排查

    今天使用数据库的时候,遇到一个场景,即在插入数据完成后需要返回此数据对应的自增主键id,但是使用Mybatis中的generatedKey且确认各项配置均正确无误的情况下,每次插入成功后,返回的都是...终于凭借着一次Debugg发现的问题,原来使用Mabatis中的insert或者insertSelective方式插入时,如使用int insert(TestGenKey testGenKey),返回值...int表示的是插入操作受影响的行数,而不是指的自增长id,那么返回的自增id到底去哪里了呢?...-- 注释不能全干掉,不然每次xml文件都有重复内容 --> ...sqlStatement="JDBC" identity="true"/> 给需要获取自增长

    1.7K10

    nextline函数_JAVA中Scanner中的next()和nextLine()为什么不能一起使用

    但前不久大疆笔试需要持续输入,早忘了 Scanner 怎么写,而那个场景用 Scanner 很好实现 …… 就继续在这里记录一下 Scanner 的坑吧 一、next & nextLine 区别next不能得到带有空格的字符串...i = 0; i < num; i++) { //str[i] = sc.next(); //str[i] = sc.nextLine(); } sc.close(); } } 1. next 使用举例...: 输入 1: 2 abc cba 结果 1: str[0] = “abc” str[1] = “cba” 原因:next() 方法遇到有效字符前所遇到的空格、tab 键、enter 键都不能当作结束符...输入 2: 2 abc cba efg gfe 结果 2: str[0] = “abc” str[1] = “cba” 原因:next() 方法遇到有效字符前所遇到的空格、tab 键、enter 键都不能当作结束符...不是预期的 “abc cba” 和 “efg gfe” 2. nextLine 使用举例: 输入 1: 2 abc cba 结果 1: str[0] = “” str[1] = “abc” 原因:以回车

    2.7K10

    DOM事件基本概念大总结(前端必备)

    这样一来就不会继续捕获下去了 IE 事件对象 为什么不能统一呢,非要学两套 IE 事件对象与 DOM 级有一定差异 常用属性 cancelable 默认值为 false,true 为取消冒泡。...IE 中的 event 对象作为 window 对象的一部分存在,可以通过 window.event 来获取 通过文档对象赋值的方法,必须要指定 window.event ,直接使用 event...建议使用之前写的跨浏览器事件处理方法。当然也可以通过获取 dom 对象,并对其属性赋值,也可以直接在 html 元素上绑定。...,会冒泡 focusin 获取焦点元素上触发,会冒泡 blur 失去元素上触发,不会冒泡 DOMFocusOut 失去焦点元素上触发,会冒泡; Opera 专有 focus 获取焦点元素上触发,...不会冒泡 DOMFocusIn 获取焦点元素上触发,会冒泡; Opera 专有 鼠标与滚轮事件 鼠标点击与移动 主要是点击、双击、光标移入、移出、暗下、放开的操作; mouseenter 首次移入元素内部触发

    1.9K20

    【前端 · 面试 】JavaScript 之你不一定会的基础题(二)

    争取每个知识点能够多总结一些,至少要做到面试,针对每个知识点都可以侃起来,不至于哑火。...对于这个答案中的第二次输出结果,有人生出了疑惑:为什么 parent 事件触发,e.target.id 的结果为 child呢?不应该是 parent 吗?...] 事件捕获和事件冒泡 当一个事件发生在具有父元素元素上(例如,我们的例子中是 child 元素),现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。...关于 this 和 event.target ,总结如下: 整个事件流程中,event.target 永远都指向真正触发了事件流程的元素 ,即处于事件触阶段的元素。...event 还有一个属性 event.srcElement,它是 event.target 的别名,但是是一个非标准属性,尽量不在生产环境中使用

    55310

    HTML5、JS实现元素拖拽排序

    触发次数dragenter 当拖动元素进入目标触发一次 1dragover 当拖动元素目标元素范围内反复触发 ndrop 拖动元素目标元素内释放(设置了dropover事件的前提下) 1信息传递拖动元素可以设置传递的信息...注意只能传递字符串和url,但是firefox使用text或Text作为key时会打开新的标签页,所以不要用他们作为key。注意:设置了dragover后drop才会触发!!下面是代码实例:<!...//event.target出发事件的元素 event.dataTransfer.setData("te", event.target.innerText); //不能使用text,firefox...== draging) { //getBoundingClientRect()用于获取某个元素相对于视窗的位置集合 var targetRect...dragingRect, draging); _animate(targetRect, target); } } } //获取元素元素中的

    51960

    Spark为什么只有调用action才会触发任务执行呢(附算子优化和使用示例)?

    微信图片_20200709201425.jpg但初学Spark的人往往都会有这样的疑惑,为什么Spark任务只有调用action算子的时候,才会真正执行呢?...: 我们实际的业务场景中经常会使用到根据key进行分组聚合的操作,当然熟悉Spark算子使用的都知道像reduceByKey、groupByKey、aggregateByKey、combineByKey...这里举一些常用的transformation和action使用示例: transformation >> map map是对RDD中的每个元素都执行一个指定的函数来产生一个新的RDD。...任何原RDD中的元素新RDD中都有且只有一个元素与之对应。...任何原RDD中的元素新RDD中都有且只有一个元素与之对应。

    2.4K00

    Spark为什么只有调用action才会触发任务执行呢(附算子优化和使用示例)?

    但初学Spark的人往往都会有这样的疑惑,为什么Spark任务只有调用action算子的时候,才会真正执行呢?咱们来假设一种情况:假如Spark中transformation直接触发Spark任务!...: 我们实际的业务场景中经常会使用到根据key进行分组聚合的操作,当然熟悉Spark算子使用的都知道像reduceByKey、groupByKey、aggregateByKey、combineByKey...这里举一些常用的transformation和action使用示例: transformation >> map map是对RDD中的每个元素都执行一个指定的函数来产生一个新的RDD。...任何原RDD中的元素新RDD中都有且只有一个元素与之对应。...任何原RDD中的元素新RDD中都有且只有一个元素与之对应。

    1.7K30

    深入理解 DOM 事件机制

    UI事件,当用户与页面上的元素交互触发,如:load、scroll 焦点事件,当元素获得或失去焦点触发,如:blur、focus 鼠标事件,当用户通过鼠标页面执行操作触发如:dblclick、mouseup...滚轮事件,当使用鼠标滚轮或类似设备触发,如:mousewheel 文本事件,当在文档中输入文本触发,如:textInput 键盘事件,当用户通过键盘在页面上执行操作触发,如:keydown、keypress...获取body标签),然后按照普通的html结构一层一层往下传,最后到达目标元素。...动态绑定事件 很多时候,我们需要通过用户操作动态的增删列表项元素,如果一开始给每个子元素绑定事件,那么列表发生变化时,就需要重新给新增的元素绑定事件,给即将删去的元素解绑事件,如果用事件代理就会省去很多这样麻烦...:d¤tTarget:a 从输出中我们可以看到,event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素event.target

    2.8K50

    事件

    建议:由于老版本浏览器不能很好的支持事件捕获,所以我们可以放心使用事件冒泡,特殊情况下再使用事件捕获。 3....event : window.event; }, // 获取目标元素 getTarget: function(event){ return event.target...事件 说明 blur 元素失去焦点触发,不会冒泡 focus 元素获得焦点触发,不会冒泡 focusin 元素获得焦点触发,会冒泡 focusout 元素失去焦点触发,会冒泡 当焦点从页面中的一个元素移动到另一个元素...被纳入标准; mousemove 鼠标指针元素内部移动重复地触发; mouseout 鼠标指针位于一个元素上方,然后用户将其移入另一个元素触发。...需要注意的是,使用最新chrome51不能修改弹窗文字! ?

    3.3K51

    解析Javascript事件冒泡机制

    分析以上的结果: 无论是body,body 的子元素div1,还是 div的子元素div2,还有 span, 当这些元素被点击click,都会产生click事件,并且body都会捕获到,然后调用相应的事件处理函数...为什么会出现上述的情况呢? 原因就在于事件的冒泡,点击span的时候,span 会把产生的事件往上冒泡,作为父节点的div2 和 祖父节点的div1也会收到此事件,于是会做出事件响应,执行响应函数。...比如span 点击事件,产生一个event 事件对象,event.target 指向了span元素,span处理此事件,event.currentTarget 指向的也是span元素,这时判断两者相等...if(event.target == event.currentTarget),这样存在了很大的代码冗余,现在是三个元素还好,当有10几个,上百个又该怎么办呢?...答案是可以的,下面通过给body 元素添加事件监听,然后通过判断event.target 然后对不同的target产生不同的行为。

    74040

    jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

    事件对象只有事件发生才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁 事件对象是跟当前触发元素息息相关的,能从里面获取相关的信息,找到 event.target...event.target target 属性可以是注册事件元素,或者它的子元素。...经常用于事件冒泡处理事件委托 event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 <!...event.which:获取鼠标单击,单击的是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode 标准化了。...DOM元素; .this和event.target都是dom对象 如果要使用jquey中的方法可以将他们转换为jquery对象。

    4.1K30

    从 antDesign 来窥探移动端“滚动穿透”行为

    将可滚动元素拖动至顶部或者底部,继续拖动触发最近可滚动祖先元素的滚动。 还有另一种常见场景,我们某个可滚动元素上进行拖动,当该元素的滚动条已经到达顶部/底部。...我们元素区域内进行拖拽,当子元素滚动到底部(顶部),仍然继续往下(上)进行拖动。 原理 上述两种情况相信大家也日常业务开发中碰到过不少次。...移动端,我们完全可以使用一种通用的解决方案来解决上述造成“滚动穿透”意外行为: 无论元素是否可以滚动,每次元素的拖拽事件触发我们只需要进行判断: 寻找当前触发 touchMove 事件 event.target...10 表示寻找到可滚动元素,当前元素滚动条底部 // 自然 parseInt(status, 2) & parseInt(direction, 2) 这里使用了二进制的方式,...想象一下,如果你的页面中每个 Modal 弹窗都使用了 useLockScroll 这个 hook ,那么当页面中开启两个弹窗,当关闭一个另一个还存在不能移除了 BODY_LOCK_CLASS 吧

    53620

    Nginx使用火山引擎或者其他 CDN无法获取客户端真实ip解决方法

    在前久发现,uptime经常监控到网站504,防火墙查看日志才知道,它把我CDN全拦截了,但是我明明设置了获取真实IP,还是把我CDN拦截了,中途我换了CDN,发现同样配置有些CDN是真实IP,有些没有...比如火山引擎,华为云等等就不会获取真实IP。...我通过问度娘,给出的方法无非就是面板开启CDN,或者通过修改日志格式,再或者通过加入下面这个获取真实IP: set_real_ip_from 0.0.0.0/0;real_ip_header X-Forwarded-For...; 根据我的实验,通过修改日志格式的方法确实能在网站日志里看到真实IP,但是防火墙里默认的还是CDN或者其中转IP,这样的话,防火墙里设置的一些拦截IP的规则就没用了,还会严重影响我们网站业务的进行。...然后我想了下,既然都是通过获取请求头的方式获取IP,那么是否是因为这些CDN的请求头的问题,我换一下获取规则就行了呢?然后开始找文档,发现只有上面哪个提到了请求头。

    2.1K10

    事件对象的使用、属性和方法

    1 event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 2 target属性可以是注册事件元素或者子元素,通常用于比较event.target...,可以采用要一个技巧来处理,也是常说的"事件委托 5 event.type获取事件的类型 6 event.pageX 和 event.pageY获取鼠标当前相对于页面的坐标,通过这2个属性,可以确定元素在当前页面的坐标值...9 event.which获取鼠标单击,单击的是鼠标的哪个键 10 event.which 将 event.keyCode 和 event.charCode 标准化了,event.which...也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3 11 event.currentTarget : 事件冒泡过程中的当前DOM元素...元素 13 .this和event.target都是dom对象,使用jquey中的方法可以将他们转换为jquery对象,比如this和$(this)的使用event.target和$(event.target

    1.5K30

    浅析 JavaScript 中的事件委托

    为什么要进行事件委托? 首先实现一个小功能:单击 HTML 的按钮后,把消息输出到控制台。...你不需要把委托事件监听器直接附加到按钮上,而是可以委托父监听 。单击按钮,父元素的侦听器将会捕获冒泡事件(还记得前面所说事件传播吗?)。...使用事件委托需要 3 个步骤: 步骤 1:确定要监视事件的元素的父级元素 在上面的例子中, 是按钮的父元素。...该事件侦听器也会对按钮单击做出反应,因为按钮单击事件冒泡通过祖先元素(由于事件传播)。 步骤 3:用 event.target 选择目标元素 单击按钮,将会用event 对象参数调用处理函数。...使用事件委托需要三个步骤: 确定要监视事件的元素的父级元素 把将事件侦听器附加到父元素event.target 选择目标元素 ---- 作者:Dmitri Pavlutin 翻译:疯狂的技术宅

    2.6K30
    领券