javascript - 通过 .change() 事件处理程序传递变量

Question

我有一些链接的年份、品牌、型号、子型号、颜色的选择元素。第一个在加载时通​​过 getJSON 调用填充:

$.getJSON("http://mydomain/something.cfm?get=years",
    function(json) {
        var data = "";
        $.each(json, function(i, v) {
            if(v.name != ""){
                data = data + "<option value='" + v.value + "'>" + v.name + "</option>";
            }
        });
        $(wheelBuilder.YEARS).html(data).removeAttr("disabled");
        if(getUrlVars()["year"] != undefined){
            $(wheelBuilder.YEARS).val(getUrlVars()["year"]);
            $(wheelBuilder.YEARS).change();
        }
    }
);

当用户选择某个项目时，将填充后续的选择元素。 .change() 函数进行 .getJSON() 调用以获取数据以填充每个后续选择元素。 getUrlVars() 函数按名称从查询字符串中获取变量。如果可用，则必须预先选择每个选择元素。为了进行此预选择，必须调用 .change() 函数，以便填充下一个元素。

事情是，只有当从 onload 调用这些 .change() 函数时，我才需要在这些 .change() 函数内部运行代码，而不是当用户手动进行更改时。我注意到 jquery 文档有一个 .change( [eventData ], handler ) 选项用于 .change() 函数，但我不确定这是否可以解决问题或如何使用它(未提供示例)

谢谢。

TLDR:基本上，我试图找到一种方法来区分何时通过代码选择选择选项与何时由人类选择选择选项。

Answer 1

有很多方法可以做到这一点，但如果您使用 jquery，那么最简单的方法可能是检查事件以查找事件起源的迹象。

这里有一个入门指南:http://plnkr.co/edit/wfOQgjzwijw3IlN1PlNq?p=preview 。

var onChange = function(evnt) {
    console.log("Changed: ", arguments)
}

var $select = $("#mySelect");
$select.change(onChange);

// Manually trigger the change event
$select.change();

控制台中的第一个事件是由 jQuery 触发的。如果您手动去更改组合框，您将获得第二个事件。以下是我可以看到的一些差异:

• jQuery 触发的事件包含“isTriggered”属性(请参阅:In JavaScript, what is event.isTrigger?)。 我可能会使用这个来确定事件是否是内部触发的。
• 用户触发的事件包含许多额外的属性，例如:“originalEvent”、“bubbles”、“cancelable”等。