开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JavaScript -如何访问event.currentTarget的同级？

JavaScript中，可以通过一些方式访问event.currentTarget的同级元素。下面是一些常用的方法：

使用父元素进行遍历：可以通过event.currentTarget.parentNode或event.currentTarget.parentElement访问到父级元素，然后通过父元素的childNodes或children属性来获取所有子元素，再使用循环遍历找到目标元素。
使用兄弟元素进行查找：可以通过event.currentTarget.nextSibling和event.currentTarget.previousSibling访问到当前元素的下一个兄弟元素和上一个兄弟元素，然后再通过循环向前或向后查找满足条件的元素。
使用相同父元素的子元素进行筛选：可以通过event.currentTarget.parentNode或event.currentTarget.parentElement访问到父级元素，然后使用querySelectorAll方法来选择所有同级元素，再使用循环遍历找到目标元素。
使用事件委托：可以在父元素上添加事件监听器，然后通过事件对象的target属性来获取真正触发事件的子元素，再进行判断和操作。

这些方法都可以根据具体场景和需求选择使用，例如，如果需要快速获取同级元素中的第一个或最后一个元素，可以使用兄弟元素进行查找；如果需要根据特定条件筛选同级元素，可以使用父元素的子元素进行筛选。

在腾讯云的产品中，与JavaScript相关的产品包括云函数 SCF（https://cloud.tencent.com/product/scf）和云服务器 CVM（https://cloud.tencent.com/product/cvm）。云函数 SCF 是一个事件驱动的无服务器计算服务，可以在云端运行 JavaScript 代码，处理各类事件和请求。云服务器 CVM 提供了云端虚拟机的计算能力，可以使用 JavaScript 进行服务器端开发和管理。

注意：本回答仅提供了一些常用的方法和腾讯云产品的参考链接，具体应用和实现方式还需要根据实际情况进行调整和选择。

相关搜索:需要使用event.currentTarget进行Javascript计算的帮助如何在JSON Javascript中引用同级元素？PHP访问XML同级标记的属性从Javascript中的方法引用同级属性在React中访问同级组件的refs 从动态创建的同级元素访问属性访问自执行函数中的同级函数访问同级中v-for循环的索引？(VueJS)PHP - Array -基于键访问同级/子键的值访问数据模型中的同级数据类型的Javascript最近/下一个同级如何访问旧值- JavaScript Javascript:如何访问数组对象？如何全局访问JavaScript对象如何访问变量中的变量？(javascript )webpack之后如何访问我的javascript？如何仅影响Last of类型的同级如何获取同级输入元素的值？如何获取同级输入字段的值？如何遍历XSLT中的同级元素

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

加点JavaScript魔法

在深入研究客户端之前，让我们先了解一下支持这些用户弹窗所需的服务器端的工作。用户弹窗的内容将由新路由返回，它是现有个人主页路由的简化版本。视图函数如下：

01

解析Javascript事件冒泡机制

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://louluan.blog.csdn.net/article/details/23927347

04

前端|event.target与event.currentTarget的区别

event.target事件和event.currentTarget事件，经常被人们混淆。因为它们两个有时候的返回值是完全一样的，因此很具有迷惑性。然而如果真的是一样的，那当初官方就不会做这样没有意义的事了。下面我就结合我所学的知识来给大家讲一下，这两者的区别。

02

javascript当中冒泡（event bubble）用法

9.冒泡（event bubble）缺省情况下，当几个元素重合，事件从最上层元素开始往下层元素传播。例 9.1（bubbleIEFF.html） <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function docClick(event) { var event = event || window.event; alert("IE和FF一样：外面文档："+event.type); } //document.captureEvents(Event.CLICK); document.onclick = docClick; </script>

ie和FF都冒泡从里往外

缺省情况下，当几个元素嵌套重合，事件从最上层元素开始往下层元素传播。例 9.2（bubble1currentTargetsrcElementIEFF.html） <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function gotClick(event, who) { /* 1) 在ie中没有currentTarget，我们只能用下面的方法：来仿真火狐的效果。 2）马克-to-win：event.target是最上层的元素，event.currentTarget是最底层的元素 */ var event = event||window.event; var eTarget =event.srcElement||event.target; var eCurrentBottomTarget =event.srcElement||event.currentTarget; if (window.navigator.userAgent.indexOf("MSIE") >= 1) 更多请见：https://blog.csdn.net/qq_43650923/article/details/102211582

05

Flex开发常遇问题

Flex的一些零碎知识点，我是个flex初学者，很多知识点可能很幼稚，但是都是我学习和开发过程中遇到的问题。

01

浅谈JavaScript的事件（事件对象）

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中，会包含鼠标的位置信息。而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象，但支持方式不同。 DOM中的事件对象　　兼容dom的浏览会将一个event对象传递到事件处理程序中。 1 var aa=document.getElementById("aa"); 2 aa.onclick=functi

06

深入理解 DOM 事件机制

本文主要介绍 DOM 事件级别、DOM 事件模型、事件流、事件代理和 Event 对象常见的应用，希望对你们有些帮助和启发！

05

一篇文章教你如何捕获前端错误

JavaScript代码在用户浏览器中执行时，由于一些边界情况、本地环境的不可控等因素，可能会存在js运行时错误。

09

一篇文章教你如何捕获前端错误

随着前端页面承载功能越来越多，用户本地浏览器环境也错综复杂，因此即使有完善的测试，我们也无法保证上线的代码不会出错。在这种场景下，前端页面的监控就成了各个web项目必备的工具。

04

自己做个 Material Ripple 效果的按钮

我第一次发现 Material Design 是几年前玩 Android（当时还不会开发 Android 应用程序）时候看到的些贴文。那时候我就超级喜欢它的按钮组件。它有着波纹效果，以简单，优雅的方式为用户提供反馈，Q 弹爆汁儿～

03

jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

一、事件委托（委派）含义：在#A上绑定click事件，但是让#B触发click事件，相当于在 #B 上假绑定了 click 事件

02

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

React技巧之设置onClick监听器

原文链接：https://bobbyhadz.com/blog/react-onclick-link[1]

01

JavaScript事件对象

事件对象其实就是event对象，在我们操作DOM发生事件时，所有的相关信息都会被集中存储在这个event对象中，这个对象中包含了被发生事件的元素，发生事件的类型以及可能与特点事件相关的其他数据，所有浏览器都支持这个event对象，但是ie的访问方式略有不同，我们稍后细说，往下观看。

03

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

在上一篇文章【前端 · 面试】JavaScript 之你不一定会的基础题（一）中，有同学产生了这样一个疑惑：为什么 click 事件的监听函数中，this.id 和 event.target.id 的输出值是不一样的？

01

浅析 JavaScript 中的事件委托

为了实现这个小功能，你需要选择按钮，然后再用 addEventListener() 方法来附加事件监听器：

03

理解JavaScript中的This,Bind,Call和Apply

this关键词在JavaScript中是个很重要的概念，也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中，this是一个对象的引用。this指向的对象可以是基于全局的，在对象上的，或者在构造函数中隐式更改的，当然也可以根据Function原型方法的bind，call和apply使用显示更改的。

04

【译】理解JavaScript中的This,Bind,Call和Apply

this关键词在JavaScript中是个很重要的概念，也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中，this是一个对象的引用。this指向的对象可以是基于全局的，在对象上的，或者在构造函数中隐式更改的，当然也可以根据Function原型方法的bind，call和apply使用显示更改的。

02

阻止mouseover冒泡行为_onmousedown是什么意思

onmouseenter 事件在鼠标指针进入到绑定事件的那个元素上时触发。该事件通常与 onmouseleave（在鼠标指针离开绑定事件的那个元素上时触发）事件一同使用。 onmouseenter 事件类似于 onmouseover 事件。唯一的区别是 onmouseenter 事件不支持冒泡。

02

问题小记

冒泡和捕获：当addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定；当第三个参数为false或者为空的时候，代表在冒泡阶段绑定

01

50道JavaScript详解面试题，你需要了解一下

英文 | https://javascript.plainenglish.io/50-questions-to-master-the-javascript-coding-interview-639d2ac12630

04

那些年遇到的刁钻JavaScript面试题（可防踩坑）

解析：这是比较常规的面试题了，主要考察的是 JavaScript 中的隐式类型转换。在 JS 中 + 主要有两个作用：数字相加和字符串拼接，当 + 两边不都为数字时会把它们都转为字符串再拼接，所以第一个 2 会先被转成 '2' 再与第二个 '2' 拼接。

02

【前端】event.target 和 event.currentTarget 的区别

03

React技巧之改变元素样式

原文链接：https://bobbyhadz.com/blog/react-change-style-on-click

01

React技巧之添加或移除类

原文链接：https://bobbyhadz.com/blog/react-add-remove-class-on-click[1]

01

移动端H5 input输入完成后页面底部留白问题

说明最近在用vue写几个H5页面在微信上展示，遇到一个在弹窗上input输入完成之后点击键盘的完成，页面底部留出一片空白的问题 [20190521155136.png] 出现原因分析当键盘抬起时，window.scrollY会从0变到键盘的高度，所以解决办法就是当input失去焦点的时候，将window.scrollY重新设置为0 解决给所有的input``textarea组件设置获取焦点和设置焦点事件，失去焦点的时候将window.scrollY`设置为0 因为的是vue所以结合vue来写代码 <t

02

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

事件流这一概念源自于对事件触发对象的思考。例如常见的点击事件，鼠标移动事件。这些事件发生之时，往往不只是点击或者移动到某一特定元素上。比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？事件冒泡即事件从指定元素开始传播到最外层的元素，并且该事件不仅会在指定元素上发生，还会在传播过过程中的每一个元素上发生。 <html> <body>

02

一篇文章搞懂前端事件监听

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

01

看完这几道 JavaScript 面试题，让你与考官对答如流（上）

它们是属于虚值，可以使用Boolean(value)或!!value将其转换为布尔值时，值为false。

01

记录一些前端面试题

定时自动刷新，content表示刷新间隔，单位为秒s，下面代码表示页面每隔三秒刷新一次

02

JavaScript面试问题：事件委托和this

JavaScript不仅门槛低，而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景，所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书，除非你去参加工作面试才会去思考为什么或者怎么做，否则JavaScript只是你工作的内容。这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于 Darcy Clarke的JavaScript典型面试问题列表。希望你不仅仅是为了答案而阅读完这篇文章，每一

05

移动端H5 input输入完成后页面底部留白问题

Contents 1 说明 2 出现原因分析 3 解决 4 补充:解决方案2 5 补充:解决方案3 6 补充:页面来回弹跳 7 最后说明最近在用vue写几个H5页面在微信上展示，遇到一个在弹

02

会员管理小程序实战开发06-生命周期函数及自定义方法介绍

我们上一节介绍了权限的设计思路，并且介绍了CSS的盒模型。本节我们介绍一下生命周期函数和自定义方法。

03

13事件

IE8中提供的事件监听器为：element.attachEvent(eventName,functionName)

03

daily-question-03（前端每日一题03）

在这里记录着每天自己遇到的一道印象深刻的前端问题，以及一道生活中随处可见的小问题。

00

前端测试题:(解析)如果要获取鼠标在当前文档中的位置，可以使用下面哪些属性?

JS在触发事件时，会自动生成event对象传入到事件函数中。可以通过传参或直接使用关键字.

03

分享30个你必须知道的JS基础知识

今天这篇文章整理了30个你必须知道的关于JavaScript的常识点，无论你是面试还是日常开发，都会给你很大的帮助。

03

编写高质量代码：改善JavaScript程序建议--函数式编程

使用call和apply方法可以把一个函数转换为方法传递给某个对象。这种行为只是临时的，函数最终并没有作为对象的方法而存在，当函数被调用后，该对象方法会自动被注销。

04

Typora配置双击图片放大功能

可以从Github下载：https://github.com/lokesh/lightbox2

03

JavaScript捕获和冒泡探讨

上个星期在微博中一个关于javascript捕获和冒泡代码的讨论，可能没有动手实现一篇的人无法给出确定的答案。

02

Zabbix 随笔：钉钉机器人告警（脚本方式）

本文将带来 Zabbix 6.0 LTS 如何利用 Python 脚本实现钉钉机器人通知告警信息。

03

如何及时发现网页的隐形错误

先来说说JavaScript的错误类型，ECMA-262 定义了 7 种错误类型，说明如下：

00

jQuery 事件

什么是事件页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。常见 DOM 事件：鼠标事件键盘事件表单事件文档/窗口事件 click keypr

07

createjs入门

createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。地址：http://www.createjs.com/ 开发createjs的动画或游戏，没有重型的IDE或什么工具支持，我们只能从零开始写js。一方面，这样对于jser来说，足够灵活；另外一方面，createjs因此足够精简足够小。 createjs由几个库组成： l easeljs，这个是核心，包括了显示列表、事件机制； l preloadjs，用于预加载图片等； l tweenjs，用于控制元

04

屏蔽浏览器退格键页面后退

window.onload = function () { document.getElementsByTagName("body")[0].onkeydown = function (event) { if (event.keyCode == 8) { var elem = event.target || event.srcElement || event.currentTarget; var name = elem.nodeNa

03

Backbone.js

注：教程请参见这里（本文有很多内容都是从这里翻译的），官方网站在这里；综合例子参见这里。

02

事件

JavaScript与HTML之间的交互式通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。

05

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

1 event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 2 target属性可以是注册事件时的元素或者子元素，通常用于比较event.target和this来确定是不是由于冒泡而触发的，经常用于事件冒泡时处理事件委托 3 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁 4 jQuery事件对象的作用 li都有一个共同

03

用户登录前后端分离开发实战案例：React，npm，webpack，ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UIKotlin 开发

用户登录前后端分离开发实战案例：React，npm，webpack，ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UI

03

【前端面试】 - 观远数据电话面试题

空类型：undefined null 值类型：基本数据类型 String Number Boolean 引用型：复杂数据类型 Object Array 对象

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭