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

元素事件侦听器上的this.id将成为所单击元素的所有id的数组

这个问题涉及到前端开发和事件处理。元素事件侦听器是通过在DOM元素上添加事件监听器来触发特定操作的一种机制。在事件处理函数中,this关键字指向触发该事件的元素本身。

在给定的情况下,this.id将返回触发事件的元素的id属性。要注意的是,如果事件处理函数被绑定到多个元素上,并且这些元素都具有id属性,那么this.id将返回其中一个元素的id值,而不是一个数组。

如果需要获取所有被点击元素的id值并存储为数组,可以使用其他方法来实现。一种常见的方法是通过添加一个事件委托机制,在父元素上监听点击事件,然后根据事件目标的id属性将其添加到一个数组中。

以下是一个示例代码:

代码语言:txt
复制
<div id="parent">
  <div id="element1">Element 1</div>
  <div id="element2">Element 2</div>
  <div id="element3">Element 3</div>
</div>

<script>
  var parent = document.getElementById('parent');
  var clickedIds = [];

  parent.addEventListener('click', function(event) {
    if (event.target && event.target.id) {
      clickedIds.push(event.target.id);
    }
  });

  // 示例点击操作
  document.getElementById('element1').click();
  document.getElementById('element2').click();
  document.getElementById('element3').click();

  console.log(clickedIds); // 输出:["element1", "element2", "element3"]
</script>

上述示例中,通过给父元素"parent"添加点击事件监听器,通过判断事件目标的id属性并将其添加到clickedIds数组中,最后输出了所有被点击元素的id值的数组。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

浅析 JavaScript 中事件委托

毫无疑问,按钮本身会收到单击事件。而且所有按钮祖先,甚至包括 document 和 window 对象也会收到。...你不需要把委托事件监听器直接附加到按钮,而是可以委托父监听 。单击按钮时,父元素侦听器将会捕获冒泡事件(还记得前面所说事件传播吗?)。...步骤 2:把事件侦听器附加到父元素 document.getElementById('buttons') .addEventListener('click', handler) 事件侦听器附加到按钮元素...现在,你可以看到事件委托模式好处:事件委托仅需要一个事件侦听器,而不必像本文最初那样侦听器附加到每一个按钮。...使用事件委托需要三个步骤: 确定要监视事件元素父级元素事件侦听器附加到父元素 用 event.target 选择目标元素 ---- 作者:Dmitri Pavlutin 翻译:疯狂技术宅

2.6K30
  • 如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

    每个任务包含以下元素: 用于任务标记为完成单选按钮 用于显示任务 span 元素 一个编辑按钮和一个删除按钮 使用 CSS 设计样式 我们将从主体样式开始,以确保所有元素水平居中: body {...该allTasks数组存储所有任务,每个任务都有一个 id(时间戳)、一个名称和一个完成值,该值可以是 true 或 false。...示例任务如下所示: { id:1700000, name: "Name of task", completed:false } 添加新任务 好吧,首先向添加任务按钮添加单击事件侦听器。...在这个函数中,我们想要执行与删除按钮相同步骤:即: 获取所有编辑按钮 使用forEach()方法迭代并获取最接近li元素 获取 data-id 属性 allTasks使用 id数组中查找任务...最后,我们附加 editTask、completeTask 和 removeTask 事件侦听器

    12810

    用纯 JavaScript 撸一个 MVC 框架

    当你提交新待办事项、单击删除按钮或单击待办事项复选框时,触发一个事件。视图必须侦听这些事件,因为它们是视图用户输入,它会将响应事件所要做工作分配给控制器。 我们将为事件创建 handler。...它将响应删除按钮 click 事件。删除按钮元素是 todo li 本身,它附有相应 id。我们需要将该数据发送给正确模型方法。...设置事件监听器 现在我们有了这三个 handler ,但控制器仍然不知道应该什么时候调用它们。必须把事件侦听器放在视图中 DOM 元素。...我们将回复表单submit 事件,以及 todo 列表 click 和 change事件。 在 View 中添加一个 bindEvents 方法,该方法调用这些事件。...现在我们可以这些添加到视图事件侦听器中。当你在 contenteditable 元素输入时,input 事件会被触发,离开contenteditable元素时,focusout 会触发。

    3.3K41

    前端成神之路-vue02

    当你直接修改了对象属性值,你会发现,只有数据改了,但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变前提下对其进行功能拓展 push() 往数组最后面添加一个元素,成功返回当前数组长度...pop() 删除数组最后一个元素,成功返回删除元素值 shift() 删除数组第一个元素,成功返回删除元素值 unshift() 往数组最前面添加一个元素,成功返回当前数组长度 splice...reverse() reverse() 数组倒序,成功返回倒序后数组 替换数组 不会改变原始数组,但总是返回一个新数组 filter filter() 方法创建一个新数组,新数组元素是通过检查指定数组中符合条件所有元素...}); 4 修改图书- 点击修改按钮时候 获取到要修改书籍名单 4.1 给修改按钮添加点击事件, 需要把当前图书id 传递过去 这样才知道需要修改是哪一本书籍... 6 删除图书 6.1 给删除按钮添加事件 把当前需要删除书籍id 传递过来 6.2 根据id数组中查找元素索引 6.3 根据索引删除数组元素

    1.9K20

    弄懂事件委托

    事件委托,也叫事件委派,事件代理。 当构建应用程序时,有时需要将事件监听器绑定到页面上某些元素,以便在用户与元素交互时执行某些操作。...click', function() { alert('you clicked on item: ' + item.innerHTML); }); } 虽然这样可以实现功能,但问题是要单独事件侦听器绑定到每个列表项...这是4个元素,没什么大问题,但如果列表中有10,000个事项,怎么办?这个函数将会创建10,000个独立事件监听器,并将每个事件监听器绑定到 DOM 。这样代码执行效率非常低下。...更高效解决方案是一个事件侦听器实际绑定到父容器 ,然后在实际单击时可以访问每个确切元素。这被称为事件委托,并且它比每个元素单独绑定事件处理程序更高效。...那么上面的代码可以改变为: let app = document.getElementById('todo-app'); // 事件侦听器绑定到整个容器 app.addEventListener('

    60220

    Vue 相关学习笔记(一)

    -- 阻止单击事件继续传播 --> <!...即将原本绑定在 input 事件同步逻辑转变为绑定在 change 事件 在失去焦点 或者 按下回车键时才更新 <!...pop() 删除数组最后一个元素,成功返回删除元素值 shift() 删除数组第一个元素,成功返回删除元素值 unshift() 往数组最前面添加一个元素,成功返回当前数组长度 splice...reverse() reverse() 数组倒序,成功返回倒序后数组 替换数组 不会改变原始数组,但总是返回一个新数组 filter filter() 方法创建一个新数组,新数组元素是通过检查指定数组中符合条件所有元素... 6 删除图书 6.1 给删除按钮添加事件 把当前需要删除书籍id 传递过来 6.2 根据id数组中查找元素索引 6.3 根据索引删除数组元素

    7.5K20

    前端三大框架之Vue-day02

    .trim 自动过滤用户输入首尾空白字符 只能去掉首尾 不能去除中间空格 .lazy input事件切换成change事件 .lazy 修饰符延迟了同步更新属性值时机。...即将原本绑定在 input 事件同步逻辑转变为绑定在 change 事件 在失去焦点 或者 按下回车键时才更新 <!...reverse() reverse() 数组倒序,成功返回倒序后数组 替换数组 不会改变原始数组,但总是返回一个新数组 filter filter() 方法创建一个新数组,新数组元素是通过检查指定数组中符合条件所有元素...}); 4 修改图书- 点击修改按钮时候 获取到要修改书籍名单 4.1 给修改按钮添加点击事件, 需要把当前图书id 传递过去 这样才知道需要修改是哪一本书籍... 6 删除图书 6.1 给删除按钮添加事件 把当前需要删除书籍id 传递过来 6.2 根据id数组中查找元素索引 6.3 根据索引删除数组元素

    1.6K30

    JS 和 Node.js 中事件驱动”是什么意思?

    实际,浏览器中 JavaScript 可以与 HTML 元素进行交互,这些 HTML 元素事件发送器(event emitters),即能够发送事件对象。...,并且与所有 HTML 元素一样,它们都连接到 EventTarget —— 每个 HTML 元素共同祖先。...回顾一下: HTML 元素事件发送器。 JavaScript 中注册为侦听器函数是观察者。 所有这些组件构成了“一个小小事件驱动体系结构。...要测试代码请保存下面的 HTML 内容到文件(或在 Codepen 尝试),请单击按钮,然后查看浏览器控制台: <!...另一方面,侦听器函数是观察者。 但是那些 on 方法从哪里来呢? 了解 EventEmitter Node.js 中所有事件驱动模块都扩展了一个名为 EventEmitter 根类。

    8.4K20

    js 事件笔记

    三、事件处理程序(事件侦听器(listener)) 1、概念 事件处理程序:事件触发后,执行响应对应事件程序。...1、事件对象来源 在触发DOM某个事件时候会产生一个事件对象event,这个对象包含着所有事件有关信息,包括产生事件元素事件类型等相关信息。...我这里不做赘述 2.5stopPropagation() 阻止事件在 DOM 中继续传播,防止再触发定义在别的节点监听函数,但是不包括在当前节点其他事件监听函数。...1、事件代理原理: 利用事件模型传播性质,元素监听函数绑定到父元素,通过事件传播去执行监听函数。...2、举个栗子 需求:给container里面所有box都绑定点击事件,点击时输出box值 2.1方式一:foreach 原理:选中.box所有元素,得到一个类数组对象,遍历这个类数组对象,给.box元素一一绑

    11.1K21

    图书列表案例

    date: ''       }]     }   }); 2、 把提供好数据渲染到页面上 利用 v-for循环 遍历 books 每一项数据渲染到对应数据中...}     }     3.修改图书- 点击修改按钮时候 获取到要修改书籍名单 4.1 给修改按钮添加点击事件, 需要把当前图书id 传递过去 这样才知道需要修改是哪一本书籍... 5.删除图书 6.1 给删除按钮添加事件 把当前需要删除书籍id 传递过来 6.2 根据id数组中查找元素索引 6.3 根据索引删除数组元素  <tbody...){          // 删除图书          // 6.2 根据id数组中查找元素索引          // var index = this.books.findIndex(function...(item){          //   return item.id == id;          // });          // 6.3 根据索引删除数组元素          /

    1.1K50

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

    this.id 和 event.target.id 输出值是不一样?...(`child 事件触发,` + this.id); }); 第二次执行另一套 JavaScript 代码: document.getElementById("parent").addEventListener...] 事件捕获和事件冒泡 当一个事件发生在具有父元素元素(例如,在我们例子中是 child 元素)时,现代浏览器运行两个不同阶段 - 捕获阶段和冒泡阶段。...然后,它移动到中单击元素下一个祖先元素,并执行相同操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击元素。...,所以,不仅会执行 function2,之后还会执行 function1,这样结果可能不是我们期望,我们更希望它们点击事件之间互不影响。

    55310

    提高 DevTools 控制台调试 console 12 种方法

    查找并修复事件侦听器 Firefox DevTools 检查器面板在任何附加了处理程序 DOM 元素旁边显示一个事件图标。 单击该图标以查看功能名称,然后单击左侧箭头图标以展开代码。...另外,“在调试器中打开” 图标可在 “调试器” 窗格中找到处理程序,因此你可以设置断点: Chrome 实现并不理想,但是您可以通过 DOM 节点传递给 getEventListeners() 函数来查看所有事件侦听器...例如,getEventListeners( $0 ) 显示应用于“元素”面板中当前突出显示 DOM 节点侦听器: 12....属性复制到剪贴板 console copy() 命令可以任何值复制到剪贴板。它可以是原始值,数组,对象或 DOM 节点。...传递 DOM 节点后,copy() 将该元素及其所有元素 HTML 放置在剪贴板。 等同于右键单击一个节点,然后选择 “复制”,然后选择 “复制外部HTML” 。

    71310

    《Vue入门》| 一记敲门砖,敲近你我它!

    在vue中,无需手动操作 DOM 节点,它会通过一些特殊 HTML 语法, DOM 和数据绑定起来,一旦创建了绑定,DOM 和数据保持同步,每当变更了数据,DOM 也会相应更新 双向数据绑定...,却被 v-text 指令替换了,而这也便成为了 v-text 缺点~!...(@) 我们在上面方法函数中出现了 e 这个参数,不知道细心小伙伴有没有注意到~ 在原生 DOM 事件绑定中,可以在事件处理函数形参处,接收事件参数对象 event,同样,在 v-on 指令绑定事件处理函数中...~ 6)列表渲染指令 前面我们绑定都是单值元素,当我们遇到数组元素时候就得使用上 vue 提供 v-for 标签。...使用侦听器需要注意几点 所有侦听器都应该定义到 watch 节点下 侦听器本质是一个函数,要监听哪个数据发生变化,就把对应数据名称作为方法名即可 ㈠ immediate 在默认情况下,组件在初次加载完毕后不会调用

    3.7K20
    领券