什么时候应该使用一个事件监听器，什么时候应该使用多个事件监听器？

Question

在这种情况下，当使用事件侦听器（为此使用 jQuery）时，我对性能方面的最佳选择是什么感到困惑。

案例 1： 假设您有一个包含两个输入的 div，并且您想为 keyUp 事件“监听”这两个输入。 （这个div是文档中唯一的东西，它的高度和宽度也是整个文档的高度和宽度）

        <div id=formContainer>
            <input type="text" id="a">
            <input type="text" id="b">
        </div>

什么会更好？ : 将“委托事件侦听器”附加到 formContainer 或将事件侦听器附加到每个输入？

案例 2： 现在，假设你有一个像这样的 html 结构（同样，chatContainer 是文档的全高和全宽，它和它的子级是唯一的东西）

   <div id=chatContainer>

     <div id="menu"></div> //Has to listen to clicks for interactivity
     <div id="messagesWindow"></div> //Has to listen to clicks on every message appended
     <input type="text" id="inputSomething"> //Has to listen to keyUp events

   </div>

在这种情况下，最好将事件侦听器附加到每个 div/输入，还是将所有需要的事件侦听器附加到 chatContainer (keyUp, click)？

我已经阅读了委托事件，但我不知道我是否正确。我只想做更好的事情，即使性能差异很小。 非常感谢。

Answer 1

我也不知道哪个更快（即使差异很小）。所以我写了测试代码

coffeescript 编写的代码

尽管您可以在 jsfiddle 上看到 javascript 代码，但它们是编译后的代码。

案例1 http://jsfiddle.net/5mnroam3/

（你的问题案例）

<div id=formContainer>
    <input type="text" id="a">
    <input type="text" id="b">
</div>

counterA = counterB = 0
$("#formContainer").click( (e) ->
  switch $(e.target).attr("id")
    when "a"
      counterA++
    when "b"
      counterB++
)
startTime = new Date()
for i in [0...10000]
  $("#a").trigger("click")
  $("#b").trigger("click")
endTime = new Date() - startTime
console.log("listen to container : #{endTime} ms","counterA is #{counterA}","counterB is #{counterB}")

counterA = counterB = 0
$("#formContainer").off("click")
$("#a").click((e) ->
  counterA++
)
$("#b").click((e) ->
  counterB++
)
startTime = new Date()
for i in [0...10000]
  $("#a").trigger("click")
  $("#b").trigger("click")
endTime = new Date() - startTime
console.log("listen to each elem : #{endTime} ms","counterA is #{counterA}","counterB is #{counterB}")

上面的代码在每次事件发生时都执行 10000 次点击“#a”和“#b”并执行“counter++”。 在我的macbook（MBP2013mid chrome最新）中，结果是

listen to container : 2224 ms counterA is 10000 counterB is 10000

listen to each elem : 1952 ms counterA is 10000 counterB is 10000

听每个元素会快一点。

案例2 http://jsfiddle.net/fbjyp5yL/

(案例目标元素有一个子元素，这意味着当你监听外部元素时，你必须检查被点击的元素是否有目标元素作为它的父元素，因为在事件回调函数中e.target或this始终是您可以点击的最内部元素）

<div id="outer">
  <div id="element1">
    <div class="children1"></div>
    <div class="children2"></div>
  </div>
  <div id="element2">
    <div class="children1"></div>
    <div class="children2"></div>
  </div>
</div>

counterA = counterB = 0

$("#outer").click( (e) ->
  if $(e.target).closest("#element1").length
    counterA++
  else if $(e.target).closest("#element2").length
    counterB++
  else
    console.log("unexpected event")
)
startTime = new Date()
for i in [0...5000]
  $("#element1 .children1").trigger("click")
  $("#element1 .children2").trigger("click")
  $("#element2 .children1").trigger("click")
  $("#element2 .children2").trigger("click")
endTime = new Date() - startTime
console.log("listen to outer : #{endTime} ms",counterA,counterB)

$("#outer").off("click")
counterA = counterB = 0
$("#element1 .children1,#element1 .children2").click( (e) ->
  counterA++
)
$("#element2 .children1,#element2 .children2").click( (e) ->
  counterB++
)
startTime = new Date()
for i in [0...5000]
  $("#element1 .children1").trigger("click")
  $("#element1 .children2").trigger("click")
  $("#element2 .children1").trigger("click")
  $("#element2 .children2").trigger("click")
endTime = new Date() - startTime
console.log("listen to each elem : #{endTime} ms",counterA,counterB)

在这种情况下，我的结果是

listen to outer : 2547 ms 10000 10000

listen to each elem : 2159 ms 10000 10000

所以监听外部元素就像 case 1 一样慢，并且差异比 case1 大，即使通过 20000 次点击只有 300-400 毫秒。

结论

虽然使用外部元素或每个内部元素之间的差异很小，但在每个 div/输入上侦听事件会更快。我确定是否有 10 或 20 个内部元素，差异仍然足够小。所以选择随心所欲。