实现jQuery事件委托时，如何选择最优父元素选择器？两种写法对比

针对动态生成的div[id^="parameter_${fieldId}"]元素（它的静态父元素带有.other-parameters类），直接给出结论：第二种写法（绑定到.other-parameters父元素）更优，执行效率更高，原因如下：

• 事件冒泡路径更短：事件委托依赖事件冒泡机制，把委托事件绑定在离目标元素更近的静态父元素上，事件无需从目标元素一路冒泡到document根节点，减少了层级遍历的开销，触发时的匹配检查也更快。
• 无效匹配更少：绑定在.other-parameters上时，只有当事件冒泡到这个父元素时，才会检查触发事件的元素是否符合div[id^="parameter_${fieldId}"]选择器；而绑定在document上时，页面上任何元素触发change事件都会冒泡到document，然后执行选择器匹配，大部分都是无效检查，平白消耗性能。
• 资源占用更合理：document是整个页面的根节点，绑定的事件越多，后续页面交互时的事件处理开销就越大；而绑定在特定的.other-parameters父元素上，只会在这个父元素的范围内处理事件，资源占用更可控。

简单来说，能把委托事件绑定在离目标元素最近的静态父元素上，就别往更高层级的节点（比如document）上绑，这是事件委托的最佳实践之一。

内容的提问来源于stack exchange，提问作者MD40