📜  javascript 事件对象中的选择值在哪里 - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:09.578000             🧑  作者: Mango

JavaScript 事件对象中的选择值在哪里

在 JavaScript 中,事件对象是与事件相关联的对象,它包含了关于事件的所有信息,包括事件的类型、事件的目标、事件发生的位置等等。

当一个事件被触发时,浏览器会创建一个事件对象,并将它传递给事件处理程序。事件对象提供了一些属性和方法,使得我们可以访问事件的相关信息。

其中,获取事件目标的选择值,我们可以使用事件对象的 target 属性,然后通过 value 属性获取目标元素的值。

// HTML
<select id="select">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

// JavaScript
document.getElementById("select").addEventListener("change", function(event) {
  var selectedIndex = event.target.selectedIndex;  // 获取选中的选项索引
  var selectedValue = event.target.options[selectedIndex].value; // 获取选中的选项值
  console.log(selectedValue); // 输出选中的选项值
});

在上面的代码中,我们添加了一个 change 事件监听器来监听下拉列表的变化。当用户选择一个选项时,event.target 就会返回下拉列表元素,我们通过 selectedIndex 属性获取选中的选项索引,然后通过 options 属性获取选项数组中的选项,从而获取选项的值。最后,将值输出到控制台。

总之,通过 JavaScript 事件对象的 target 属性,我们可以轻松地获取事件目标的选择值,实现与用户交互的功能。