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

【问题标题】：Passing a variable through the .change() event handler通过 .change() 事件处理程序传递变量
【发布时间】：2014-08-28 14:28:08
【问题描述】：

我有一些用于年份、品牌、型号、子型号、颜色的链接选择元素。第一个在加载时通过 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() 函数，以便填充下一个元素。

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

谢谢。

TLDR：基本上，我试图找到一种方法来区分选择选项何时被代码选择和何时选择选项被人类选择。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

这里有一个 plunkr 可以帮助您入门：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”等。

【讨论】：