addEventListener（）和$（document）.on（）事件之间的区别

Question

在我的项目中，我通过调用SMSLiTe（）函数将事件绑定到元素。我注意到，如果用户通过控制台删除，更改元素ID或类，则该函数将解除绑定。

在尝试addEventListener（事件，函数）时，如果用户通过控制台删除，则更改元素id或类。我注意到事件仍然绑定到元素，因为它仍然有效。

有人可以向我解释两者之间发生了什么。 这是我的代码。

HTML：

<span id="c1">click 1</span><br>
<span id="c2">click 2</span><br>
<span id="c3">click 4</span>

JS

//bind events to an element
function SMSLiTe(e,elem,f){
 jQuery(document).on(e,elem,f);
}
$(document).ready(function(){
    //SMSLiTe('click','#c1',function(e){
    //console.log('working');
    //});
    var a  = document.getElementById('c1');
    a.addEventListener('click',function(){ 
        console.log('working...');
    });
});