HTML 表单的自定义事件

Question

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

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

假设我有一个警告 DIV，如果这两个输入的值都为“1”，我想显示一条消息

<div id="myWarningDiv" style="display: none;" class="clswhatever">
    You have done something wrong comrade!
</div>

现在假设有很多方法可以触发更改这些隐藏字段值中的一个或两个。我不想做的是更改每个触发器上的代码以检查这两个值是否都是“1”。有没有办法我可以添加一个自定义事件来监听这件事的发生，而不使用 setInterval 或类似的东西？

这是一个简单的例子。我真正要寻找的不是将事件附加到单个 DOM 元素的方法，而是创建可能跨越多个 DOM 对象的自定义条件，但在触发时会调用事件处理函数。下面是一些伪代码：

public Boolean onBothTrue() {
   if (document.getElementById("val1").value == "1" && document.getElementById("val2").value == "1") {
       return true;
   }
   else {
       return false;
   }
}
document.addEventListener('onBothTrue',myEventHandler);
function myEventHandler() {
    var elem = document.getElementById("myWarningDiv");
    elem.style.display = "block";
} 

Answer 1

我会这样做：

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');
}

见Fiddle

Answer 2

所提供的答案很好地说明了使用或不使用 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 中的事件处理（即How to trigger event in JavaScript?）

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

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';
});

Answer 3

我将采用相同的示例，使用 JQuery 可以通过将 css 类附加到每个元素（基本上是输入）来实现。

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

jQuery

$(".listen").each(function() {
   $(this).on('change', function(){
   var val=$(this).val();
   alert(val);
   });
});

Answer 4

使用 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();
 }
});

这是一个小提琴

https://jsfiddle.net/sx0mg8k1/

设置器确保每次更改值时都会触发更改事件。

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

任何时候你想改变这个值，你都可以使用$("#val1").setVal(0);

Answer 5

试试

var input = $("input"), message = $("#myWarningDiv"), arr = [], n = 1;
input.each(function(i, el) {
  return $(el).on("input", function(e) {
    arr[i] = Number($(this).val());
    var res = arr.length === input.length ? arr.every(function(value) {
      return value === n
    }) : false;
    return res ? message.show() : message.hide()
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="val1" name="val1" value="0"/>
<input id="val2" name="val2" value="0"/>
<!-- Lets say I have a warning DIV with a message that I want to display 
     if both of these inputs have a value of "1" -->

<div id="myWarningDiv" style="display: none;" class="clswhatever">
    You have done something wrong comrade!
</div>