开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何传递event.target值？

在前端开发中，要传递event.target值，可以通过以下几种方式实现：

通过事件监听器传递：在HTML元素上添加事件监听器，当事件触发时，可以通过事件对象event来获取event.target值。例如，在JavaScript中使用addEventListener方法监听点击事件：

document.getElementById("myElement").addEventListener("click", function(event) {
  var target = event.target;
  // 处理event.target值
});

通过函数参数传递：如果需要将event.target值传递给某个函数，可以在调用函数时将event.target作为参数传递进去。例如：

function handleEvent(target) {
  // 处理target值
}

document.getElementById("myElement").addEventListener("click", function(event) {
  handleEvent(event.target);
});

通过自定义属性传递：可以在HTML元素上添加自定义属性，将event.target值作为属性值传递。然后在事件处理函数中通过访问该属性来获取event.target值。例如：

<div id="myElement" data-target="example">Click me</div>

<script>
document.getElementById("myElement").addEventListener("click", function(event) {
  var target = event.target.dataset.target;
  // 处理target值
});
</script>

这些方法可以根据具体的需求选择使用，传递event.target值的方式取决于开发者的设计和实现方式。

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

有帮助

没帮助

相关·内容

HTML5、JS实现元素拖拽排序

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari 5.1.2除外）。

06

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

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法基本用法：.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

03

解析Javascript事件冒泡机制

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

04

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

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

02

react中的事件绑定

React中的事件绑定是将事件处理函数与组件的交互操作关联起来的过程。通过事件绑定，我们可以在React组件中响应用户的交互，并进行相应的操作。

03

JS获取事件对象，获取事件的源对象（Firefox，IE）

做笔记，以防自己忘记~~ JS获取事件event，不同浏览器有不同的做法。例如IE下，在js函数中，通过window.event就可以获取，不必在函数中添加什么参数。也可以用Prototype或者JQuery等，它们有他们对事件的包装。还是使用JS库比较好，不然就有下边的麻烦。 Firefox：要传递参数 <head> <script> function click1(event,str1){ alert(event+str1); } </script> </

05

DOM事件第二弹（UIEvent事件）

此文章主要总结UIEvent相关的事件，如有不对的地方，欢迎指正。一、uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', ie: 'focusin' }, 'focusout':{ standard: 'blur', ie: 'foucsout' }, 'input': { standard: 'input',

09

React报错之You provided a `checked` prop to a form field

当我们在多选框上设置了checked 属性，却没有onChange 处理函数时，会产生"You provided a checked prop to a form field without an onChange handler"错误。为了解决该错误，可以使用defaultChecked 属性，或者在表单字段上设置onChange 属性。

03

前端学习(52)~事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。

01

AngularDart4.0 指南- 用户输入顶

用户的操作，如点击链接，按下按钮，输入文字引发DOM事件。本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。

00

那些关于DOM的常见Hook封装（一）

本文是深入浅出 ahooks 源码系列文章的第十四篇，这个系列的目标主要有以下几点：

02

Vue3 | 事件处理知识以及相关修饰符实战

即如<button @click='handleBtnClick(2, $event)'>button</button>，在事件函数调用时候，末尾入参处，加上入参变量$event：

02

Cocos Creator之添加按钮

Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后响应一个自定义的行为。

02

导航菜单优化制作

摘要总结：本文主要介绍了如何利用JavaScript语言实现一个具有轮播效果和鼠标悬浮弹出菜单的导航菜单。首先介绍了JavaScript语言的基础知识，然后详细讲解了如何利用JavaScript语言实现轮播效果和鼠标悬浮弹出菜单。最后介绍了如何使用JavaScript语言实现导航菜单的交互功能。

07

导航菜单优化制作

以前制作导航菜单，总要加许多id在HTML中，js代码也要将id挨个加上去，今日终于习得破解之法，不在用以前那种笨拙的方法了。

01

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

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

02

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

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

06

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

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

02

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

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

01

读Zepto源码之Fx模块

00

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

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

03

event.srcElement 用法笔记

event.srcElement 可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。

02

如何点击穿透Electron不规则窗体的透明区域

首先，把窗口的高度（height）和宽度（width）值修改为相同的值，使窗口成为一个正方形。

01

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

11	12	13	14
21	22	23	24

</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

Backbonejs如何在events中传递参数

最近在用Backbonejs做个应用，至于是啥应用大家可以先猜测下，猜中无奖。这次实践应该比之前学习todos那个东西更具有实际意义。其中遇到一个问题，就是如何在event中给函数传递参数。

01

DOM事件探索

1.HTML事件处理程序 2.DOMO级事件处理程序 3.DOM2级事件处理程序

05

JavaScript 事件委托以及jQuery对事件委托的支持

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

06

React报错之Expected `onClick` listener to be a function

当我们为元素的onClick属性传递一个值，但是该值却不是函数时，会产生"Expected onClick listener to be a function"报错。为了解决该报错，请确保只为元素的onClick属性传递函数。

02

深入理解 DOM 事件机制

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

05

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

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

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

04

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

React 面向组件编程知识

02

【Angular6+】事件绑定

添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

03

前端开发知识汇总--JS

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

04

React的受控组件用法详解！

用state来获取和设置输入元素值的组件，称之为受控组件。<input type="text">, <textarea> 和 <select> 等标签都可用 value 属性，来实现受控组件。

04

6个规则去净化你的代码

想象以下，将两个数组合并成一个数组，并生成一个唯一值的数组。那么你会怎么命名它呢？我们也许会这样命名？

02

22 - 23 - 24 事件相关

原文地址：https://dev.to/bhagatparwinder/events-event-handling-f28

02

在前端中理解MVC服务之TypeScript篇

通过开发一个网页应用来理解构建前端应用的方法，其中，使用JavaScript作为脚本语言，并转向使用JavaScript/TypeScript作为面向对象程序开发的语言

02

8种方法助你写出高效 React 组件

本期文章主要分享了在写 React 组件时如何一步一步渐进式地写出高效的 React 组件。

02

TypeScript-自动类型推断

如上的 let value = 123; TS 会自动推断为 let value: number = 123; 所以如上的 value 变量只能存储 number 类型的数据，如上是单个数据类型的推断，接下来在来看一个联合类型的推断：

02

模拟实现jQuery的$().on()和$().trigger()

前言：仅仅是简单模拟了$().on()和$().trigger()，仅支持id选择器，事件冒泡与事件委托。

03

「译」代码整洁之道的 7 个方法

在这篇短文中，我将介绍一些你可以用来改进你的代码的方法。本文代码示例均使用 JavaScript。

02

JavaScript 学习-50.实现页面菜单拖放（Drag 和 Drop）

拖放是一种常见的操作，即抓取对象以后从一个位置拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

02

从6个方面净化你的Js代码

记录一下怎样写出整洁规范的代码，用于共勉进步。对于什么是整洁的代码，书中给出了大师们的总结：

02

「面试常问」系统理解浏览器之事件机制

在早期 IE 和 Netscape 团队在开发第四代浏览器的时候，遇到一个问题：当点击一个按钮的时候，是应该先处理父级的事件呢？还是应该先处理按钮的事件呢？IE 和 Netscape 给出了 2 种完全相反的答案，IE 提出事件冒泡的概念，而 Netscape 则支持事件捕获。

02

js判断是否是子元素

在while循环中，俺使用赋值运算符=进行迭代，直到不再有父节点，在本例中为el.parentNode返回null时, while循环结束。

00

问题小记

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

01

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

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

01

React基础语法06-事件对象的应用

老规矩，先看完官方文档，记录学习笔记：教程：https://www.runoob.com/react/react-tutorial.html 文档：http://caibaojian.com/react/

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭