Javascript HTML表单的自定义事件

假设我有两个隐藏的表单字段输入：

<input id="val1" name="val1" value="0"/>
<input id="val2" name="val2" value="0"/>

---

我会这样做：

var input1 = document.getElementById('val1');
var input2 = document.getElementById('val2');
var div = document.getElementById('myWarningDiv');

input1.addEventListener('change', check);

input2.addEventListener('change', check);

function check() {
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

编辑

窗体将从其子窗体接收更改事件，在这种情况下，我会将更改事件侦听器附加到父窗体，并在任何输入更改时执行检查，例如：

var form = document.getElementById('form1');
var inputs = form.getElementsByTagName('input');

form.addEventListener('change', check);

function check(event) {
    var element = event.target;
    //convert nodeList to Array
    var inputArray = Array.prototype.slice.call(inputs);
    var conditionMet = true;

    // check all inputs checked
    inputArray.forEach(function (el, index) {
        if (!el.checked) {
            conditionMet = false;   
        }
    });

    // OR 

    // check all inputs with a class "required" are checked
    inputArray.forEach(function (el, index) {
        if (el.className.indexOf('required') !== -1) {
            if(!el.checked) {
                conditionMet = false;
            }
        }
    });

    if (conditionMet) {
        showWarningDiv();
    }
}

function showWarningDiv() {
    // show div
    console.log('show warning');
}

---

请看

我会这样做：

var input1 = document.getElementById('val1');
var input2 = document.getElementById('val2');
var div = document.getElementById('myWarningDiv');

input1.addEventListener('change', check);

input2.addEventListener('change', check);

function check() {
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

编辑

窗体将从其子窗体接收更改事件，在这种情况下，我会将更改事件侦听器附加到父窗体，并在任何输入更改时执行检查，例如：

var form = document.getElementById('form1');
var inputs = form.getElementsByTagName('input');

form.addEventListener('change', check);

function check(event) {
    var element = event.target;
    //convert nodeList to Array
    var inputArray = Array.prototype.slice.call(inputs);
    var conditionMet = true;

    // check all inputs checked
    inputArray.forEach(function (el, index) {
        if (!el.checked) {
            conditionMet = false;   
        }
    });

    // OR 

    // check all inputs with a class "required" are checked
    inputArray.forEach(function (el, index) {
        if (el.className.indexOf('required') !== -1) {
            if(!el.checked) {
                conditionMet = false;
            }
        }
    });

    if (conditionMet) {
        showWarningDiv();
    }
}

function showWarningDiv() {
    // show div
    console.log('show warning');
}

请参见试一试

var-input=$（“input”），message=$（“#myWarningDiv”），arr=[]，n=1；
输入。每个（功能（i、el）{
返回$（el）.on（“输入”，函数（e）{
arr[i]=数字（$（this.val（））；
var res=arr.length==input.length？arr.every（函数（值）{
返回值===n
})：假；
return res？message.show（）：message.hide（）
})
});

同志，你做错了什么事！
试试看


var-input=$（“input”），message=$（“#myWarningDiv”），arr=[]，n=1；
输入。每个（功能（i、el）{
返回$（el）.on（“输入”，函数（e）{
arr[i]=数字（$（this.val（））；
var res=arr.length==input.length？arr.every（函数（值）{
返回值===n
})：假；
return res？message.show（）：message.hide（）
})
});

同志，你做错了什么事！
使用jQuery

$("#val1,#val2").change(function() {
 var other = ($(this).get(0).id==="val1")?$("#val2"):$("#val1");
 if($(this).val() == 1 && $(other).val() == 1) {
   $("#myWarningDiv").show();
 } else {
   $("#myWarningDiv").hide();
 }
});

这是一把小提琴


Setter，以确保每次更改值时都会触发更改事件

$.fn.setVal = function(val) {
    $(this).val(val);
    $(this).trigger('change');
}

任何时候想要更改值，都可以使用
$（“#val1”）.setVal（0）

$("#val1,#val2").change(function() {
 var other = ($(this).get(0).id==="val1")?$("#val2"):$("#val1");
 if($(this).val() == 1 && $(other).val() == 1) {
   $("#myWarningDiv").show();
 } else {
   $("#myWarningDiv").hide();
 }
});

这是一把小提琴


Setter，以确保每次更改值时都会触发更改事件

$.fn.setVal = function(val) {
    $(this).val(val);
    $(this).trigger('change');
}

任何时候想要更改值，都可以使用
$（“#val1”）.setVal（0）
我将采用相同的示例，使用JQuery，通过向每个元素（基本上是输入）添加css类，这是可能的

<input id="val1" name="val1" class="listen"value="0"/>  
<input id="val2" name="val2" class="listen" value="0"/>

我将举同一个例子，使用JQuery，通过向每个元素（基本上是输入）附加一个css类，这是可能的

<input id="val1" name="val1" class="listen"value="0"/>  
<input id="val2" name="val2" class="listen" value="0"/>

所提供的答案给出了很好的例子，说明了使用jQuery或不使用jQuery时，谁可以这样做。要回答有关自定义事件的问题，您可以按编写的方式注册它，但它不会启动（因为它如何知道何时启动）。因此，唯一的方法是：

window.setInterval(function(){
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        // Create the event
        var event = new CustomEvent("bothTrue", { "detail": "Both elements are true which indicates an error" });

        // Dispatch/Trigger/Fire the event
        document.dispatchEvent(event);
    }
}, 500);

这里还有其他文章讨论原生JS中的事件处理（即

使用自定义事件和更改处理程序进行更新：

var input1 = document.getElementById('val1');
var input2 = document.getElementById('val2');
var warningDiv = document.getElementById('myWarningDiv');

function customCondition() {
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        // Create the event
        var event = new CustomEvent("bothTrue", { "detail": "Both elements are true which indicates an error" });
        // Dispatch/Trigger/Fire the event
       document.dispatchEvent(event);
}

input1.addEventListener('change', customCondition);
input2.addEventListener('change', customCondition);

document.addEventListener('bothTrue', function(e){
    warningDiv.style.display = 'block';
});

所提供的答案给出了很好的例子，说明了使用jQuery或不使用jQuery时，谁可以这样做。要回答有关自定义事件的问题，您可以按编写的方式注册它，但它不会启动（因为它如何知道何时启动）。因此，唯一的方法是：

window.setInterval(function(){
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        // Create the event
        var event = new CustomEvent("bothTrue", { "detail": "Both elements are true which indicates an error" });

        // Dispatch/Trigger/Fire the event
        document.dispatchEvent(event);
    }
}, 500);

这里还有其他文章讨论原生JS中的事件处理（即

使用自定义事件和更改处理程序进行更新：

var input1 = document.getElementById('val1');
var input2 = document.getElementById('val2');
var warningDiv = document.getElementById('myWarningDiv');

function customCondition() {
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        // Create the event
        var event = new CustomEvent("bothTrue", { "detail": "Both elements are true which indicates an error" });
        // Dispatch/Trigger/Fire the event
       document.dispatchEvent(event);
}

input1.addEventListener('change', customCondition);
input2.addEventListener('change', customCondition);

document.addEventListener('bothTrue', function(e){
    warningDiv.style.display = 'block';
});

你能展示一下你的尝试吗？虽然我在javascript方面有不错的经验，但我在自定义事件方面没有太多经验，所以我不知道从哪里开始。大家好！谢谢你的意见。我现在想使用CustomEvent并将其附加到表单中。还认为应该在表单更改时而不是在Window.SetInterval上调度它。我认为我可以在任何时候使用setter函数，代码会更新值，并触发自定义事件。这个解决方案从每个人身上拿走了一点。这听起来对吗？如果是这样的话，有没有人能给出一个全面的答案，让我知道该奖励谁？我不知道如何分割赏金。我添加了另一个例子，可以做到这一点。你能展示你这样做的尝试吗？虽然我在javascript方面有不错的经验，但我在自定义事件方面没有太多经验，因此我不知道从何处开始。大家好！谢谢你的意见。我现在想使用CustomEvent并将其附加到表单中。还认为应该在表单更改时而不是在Window.SetInterval上调度它。我认为我可以在任何时候使用setter函数，代码会更新值，并触发自定义事件。这个解决方案从每个人身上拿走了一点。这听起来对吗？如果是这样的话，有没有人能给出一个全面的答案，让我知道该奖励谁？我不知道如何分配赏金。我添加了另一个例子，应该可以做到这一点。我希望我可以在身体或身体上添加一个倾听者。在我的例子中，我当然可以使用你的例子，但我的例子非常简单。如果更复杂呢（例如，我有10个输入，如果其中任何3个有可能是您的问题缺乏详细信息或太难回答的值？人们会尽其所能回答问题，这符合所问的问题。如果您想扩展问题，那么您可能应该在发布之前思考您的问题？给出一个真实的示例或显示您的尝试和结果。）也许人们会有一些值得研究的东西。我已经在我的问题中添加了一些伪代码，以便更清楚地说明我在追求什么。关于您编辑的答案-如果输入值中的一个值是由代码而不是用户输入更改的，是否会触发表单更改事件？或者我是否需要将setter设置为Prathik Rajendran suggested？不，JS中的更改事件不会在按编程方式更改元素时触发。如果您选择jQuery路线，则$.trigger就足够了，如果您想坚持使用vanilla JS，则需要查看createEvent，初始化事件，并在元素上调度事件。这是一个很好的示例。我希望可以在主体或表单中添加一个侦听器。在我的示例中，我肯定可以使用您的示例，但我的示例非常简单。如果它更复杂（例如，我有10个输入，如果其中任何3个有可能是您的问题缺少详细信息或太难回答的值），该怎么办