jquery选择器工作但document.getElementById不用于添加ES6事件

Question

我是Javascript的新手,并尝试将事件处理程序附加到选择列表.这是我的HTML:

<select id="x_selector"></select>

我正在成功添加一堆选项.但是我想添加一个on change方法.这个jquery javascript工作原理:

let xsel = $("#x_selector");
xsel.on("change", event => {console.log(event)});

但这不是:

var xSelector = document.getElementById('x_selector');
xSelector.on("change", event => {console.log(event)});

对于后一个我得到一个控制台TypeError:xSelector.on不是一个函数.

那么document.getElementById和jquery选择器之间有什么区别？

Answer 1

.on是一个jQuery方法.使用vanilla javascript,请使用.addEventListener.