Javascript 有没有办法让onClick全球化或干燥？ $（“输入”）。打开（“按键”，功能（e）{ 如果（e.which==13）{ $（“ul”）.last（）.append（“”+$（this.val（）+””）； } $（“li”）。在（“单击”，函数（）{ $（此）.toggleClass（“删除”）； }); $（“li”）。在（“mouseenter”，function（）上{ $（this.css（“颜色”、“绿色”）； }); }); $（“li”）。在（“单击”，函数（）{ $（此）.toggleClass（“删除”）； }); $（“li”）。在（“mouseenter”，function（）上{ $（this.css（“颜色”、“绿色”）； }); $（“#幻灯片”）。在（“单击”，函数（）{ $（“输入”）.slideToggle（）； });

在这里，我使用了

上的

onClick

事件两次应用删除的类，只是为了使它同时适用于页面上的动态和非动态元素。但是代码是重复的，看起来很长。有没有办法缩短，以便我可以编写一次，并为两种类型的元素激活它？

在

ul

上使用事件委派，因此您只需设置一次侦听器，而不是为每个加载的元素和每个

上设置多个侦听器。append

。另外，将

ul

和

input

jQuery包装的元素保存在变量中一次，而不是每次使用它们时选择它们并用jQuery包装它们：

$("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();
});

const$ul=$（“ul”）；
常量$input=$（“输入”）；
$input.on（“按键”，功能（e）{
如果（e.which==13）{
$ul.last（）.append（“
”+$（this.val（）+”
”）；
}
});
$ul.on（“单击”，“li”，函数（）{
$（此）.toggleClass（“删除”）；
});
$ul.on（“mouseenter”，“li”，function（））{
$（this.css（“颜色”、“绿色”）；
});
$（“#幻灯片”）。在（“单击”，函数（）{
$input.slideToggle（）；
});

您可以尝试使用jquery所有选择器

$（'*'）

。有关这方面的更多信息，请参阅 .

---

或者，您可以为每个元素添加一个特定的类，以便进行onClick操作。

一种比较通用的方法是捕获click事件并检查它是否来自ul

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

现在，您可以更改传递给

findParent

函数的标记名，并执行相应的操作

---

是的，通常这是处理容器中类似元素上事件的正确方法，而不是为每个元素分配单独的处理程序。许多开发人员没有意识到这种可能性。回答得好！回答得很好。不过有一个问题。是否需要父元素？就像你用ul做李的父母一样。如果我没有父元素该怎么办？因为问题标题谈论的是DRY，你可以将

.on

链接起来，甚至附加两个click，mousenter使用普通对象符号（

$ul.on（{click:onlicliclick，mousenter:onlimouseinter}，'li'）

）@AjayKudva，除非你的目标是：root（documentElement），你总是有一个parent@AjayKudva如果您是

append

ing（无论是使用jQuery还是vanilla JS），那么您肯定有一些将元素附加到的父容器，对吗？如果没有要追加的父级，则无法追加任何内容。。？（或者，你在想什么？@当然你是对的。我没想到。对不起，我是新手。

document.body.onclick = function(e){
  e = e || event;
  var from = findParent('ul',e.target || e.srcElement);
  if (from){
     /* it's a link, actions here */
  }
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
  while (el){
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
      return el;
    }
    el = el.parentNode;
  }
  return null;
}