纯javascript中点击jquery和addEventListener("click")的区别

Question

我正在尝试更深入地研究一些 javascript 方面。我刚刚学习了 jQuery，我想知道这两种方法之间有什么区别：

纯 Javascript：

document.getElementById("myDiv").addEventListener("click", function(){
    // do something
});

JQuery

$("#myDiv").click(function(){
    // do something
});

编辑

这不是两个建议问题的重复，这里我正在寻找这种特殊情况下的差异

Answer 1

一个显着的区别是可以删除 jQuery 处理程序无需引用处理程序本身，off:

$('div').on('click', () => console.log('clicked'));
$('div').off('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>click</div>

addEventListener 不可能做到这一点 - 您必须保存对处理程序的引用才能将其删除。 （当您使用.on 时，jQuery 会在内部保存对处理程序的引用）

例如，如果你有

window.addEventListener('click', () => console.log('click'));

之后不可能移除监听器，除非你事先猴子补丁addEventListener。

另一个显着的区别是jQuery不能在捕获阶段添加监听器，但是addEventListener可以：

window.addEventListener(
  'click',
  () => console.log('Click during capturing!'),
  true // <--- enables capturing
);


document.body.addEventListener('click', () => console.log('normal bubbling click handler'));

click

另一个区别是 jQuery 处理程序可以通过一个命令一次附加到多个元素，而 addEventListener 只能在单个元素上调用。例如，模仿

$('div').on('click' ...

当有多个div 时，您必须执行类似的操作

document.querySelectorAll('div').forEach((div) => {
  div.addEventListener('click' ...