有没有一种方法可以将两个或多个执行类似操作的事件组合起来使用DRY原理

Is there a way to combine 2 or more events that do similar operations to use the DRY principle

本文关键字：操作 事件 起来 DRY 原理 执行 组合 方法 一种 有没有 两个      更新时间：2023-09-26

我有两个事件，一个是按键，另一个是点击事件。事件做类似的事情，但它们不同(例如：它们搜索不同的元素，在我的真实代码中，它们根据输入的按钮和输入框调用diff函数(。我应该把这些事件合并起来吗？如果是，如何？

      $(document).ready( function(){
        function replaceQ(){
            var num1 = Math.floor(Math.random() *10)
            var num2 = Math.floor(Math.random() *10)
            $(".container").children().remove()
            $(".container").append("<div>" + num1 + " </div><div>" + num2 +"</div>")
                    .append("<input class='input'>").append("<button class = 'button'>Go</button>")
            var result = num1 + num2;
            return [result]
        }
        var outResult = replaceQ()[0]

        $(".container").on("click", "button", function(){
                var entry = $(this).siblings(".input").val()
            if(outResult == entry){
                outResult = replaceQ()[0]
            }
        })
        $(".container").on("keypress", "input", function(e){
            var entry = $(".input").val()
            if(outResult == entry && e.which == 13){
                outResult = replaceQ()[0]
            }
        })
        var processAnswer = function processAnswer(e){
            //if(e.target.className === "input")  
        }
        $(".input, .button").on("click", processAnswer)
    });

您可以在回调函数中获得Event.type，请参阅下面的示例代码

var processAnswer = function processAnswer(e){
  if(e.type == 'click'){
    //code here
  }
  else if(e.type == 'keypress'){
    //code here
  }
}
$(".input, .button").on("click keypress", processAnswer)

是的-有。您可以使用如下绑定方法：

$(".container button").bind("click keypress", function(){
    ....
});

编辑

您可以按照以下检查按钮或容器是否被触发

$(".container button, .container input").bind("click keypress", function(event){
    var target = $(event.target);
    if(target.is('button'))
    {
        alert("button");
    }
    else if(target.is('input'))
    {
        alert("input");
    }
});

例如，请看这把小提琴。

事件侦听器本身足够独立，因此只为处理程序创建一个函数可能更有意义。所以你的部分代码看起来是这样的：

//New Event Handling function
function eventHandler(e) {
   var entry = $(".input").val()
    if(outResult == entry && (!e.which || e.which == 13)){
        outResult = replaceQ()[0]
    }
}
    $(".container").on("click", "button", eventHandler);
    $(".container").on("keypress", "input", eventHandler);

我认为组合事件侦听器是没有意义的，因为它们正在侦听特定的元素，并且组合它们(如$(".container").on("click keypress", eventHandler);(可能会变得奇怪，因为当您单击文本字段时会触发它。因此，我将集中精力组合上面的处理程序。

相关文章：