javascript - 有什么方法可以使 onClick 全局或 DRY 吗？

Question

$("input").on("keypress",function(e){
    if(e.which===13){
        $("ul").last().append("<li>"+$(this).val()+"</li>");
    }
    $("li").on("click",function(){
        $(this).toggleClass("striked");
    });

    $("li").on("mouseenter",function(){
        $(this).css("color","green");
    });
});
$("li").on("click",function(){
        $(this).toggleClass("striked");
});
$("li").on("mouseenter",function(){
        $(this).css("color","green");
});
$("#slide").on("click",function(){
    $("input").slideToggle();
});

在这里，我使用了 onClick事件 <li>两次应用 striked 类只是为了使其适用于页面上的动态和非动态元素。但是代码是复制的并且看起来很长。有什么方法可以缩短，以便我可以编写一次并为两种类型的元素激活？

Answer 1

改为在 ul 上使用事件委托(delegate)，因此您只需一次设置监听器，而不是为加载的每个元素设置多个监听器和 在每个 .append 上。此外，将 ul 和 input jQuery 包装的元素保存在一个变量中一次，而不是每次选择它们并用 jQuery 包装它们'重新使用:

const $ul = $("ul");
const $input = $("input");
$input.on("keypress", function(e) {
  if (e.which === 13) {
    $ul.last().append("<li>" + $(this).val() + "</li>");
  }
});

$ul.on("click", 'li', function() {
  $(this).toggleClass("striked");
});
$ul.on("mouseenter", 'li', function() {
  $(this).css("color", "green");
});
$("#slide").on("click", function() {
  $input.slideToggle();
});