Question

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

纯Javascript：

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

JQuery

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

编辑

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

Answer 1

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

$('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' ...

纯JavaScript的jclick和addEventListener（“ click”）之间的区别

编辑

1 个答案: