时间戳

首页 > 解决方案 > Javascript中是否有“afterChange”事件而不是“change”？

javascript - Javascript中是否有“afterChange”事件而不是“change”？

问题描述

每当用户从与特定轴相对应的下拉列表中选择一个值时，我都会尝试使 Plotly 图表中的 X 和 Y 轴的源数据自动更新。

事件监听器有问题（下面代码的最后两行）：

function restyle(chart_div, update_data) {
            console.log(update_data.x);
            Plotly.restyle(chart_div, update_data);

    };

var update_data = {
    x: [columns[controls.x_axis_dropdown.value]], 
    y: [columns[controls.y_axis_dropdown.value]], 
};

controls['x_axis_dropdown'].addEventListener("change", function(){restyle(chart_div, update_data)});
controls['y_axis_dropdown'].addEventListener("change", function(){restyle(chart_div, update_data)});

问题是，目前每当用户更改下拉值时，都会restyle在下拉值确实更改之前调用该函数。结果，图表保持不变。

restyle更改下拉值后如何调用该函数？因此，我需要的不是事件侦听器上的“更改”事件，而是“afterChange”事件。

标签： javascriptplotlyplotly.js

解决方案

也许您需要直接从下拉元素中获取值。使用调用回调函数的事件对象来检索目标元素的相关值。

controls['y_axis_dropdown'].addEventListener("change", function(event){
    const update_data = event.target.whatever_data;
    restyle(chart_div, update_data)
});

推荐阅读