如何将 jQuery 代码转换为 JavaScript？

Question

查询：var isResizing = false,    lastDownX = 0;$(function () {    var container = $('#container'),        top = $('#top-panel'),        handle = $('#drag');    handle.on('mousedown', function (e) {        isResizing = true;        lastDownX = e.clientY;    });    $(document).on('mousemove', function (e) {        // we don't want to do anything if we aren't resizing.        if (!isResizing)             return;        var offsetRight = top.height() + (e.clientY - container.offset().top);        top.css('top', offsetRight);    }).on('mouseup', function (e) {        // stop resizing        isResizing = false;    });});脚本：var isResizing = false// eslint-disable-next-line no-unused-varsvar lastDownX = 0function resizeVerticallyInit () {  var top = document.querySelector('#topology-container')  var handle = document.querySelector('#drag')  handle.addEventListener('mousedown', function (e) {    isResizing = true    lastDownX = e.clientY  })  document.addEventListener('mousemove', function (e) {    // we don't want to do anything if we aren't resizing.    if (!isResizing) {      return    }    var offsetRight = top.height() + 20    document.querySelector('#topology-container').style.top = offsetRight  })  document.addEventListener('mouseup', function (e) {    // stop resizing    isResizing = false  })}mounted () {  ...  resizeVerticallyInit()}如您所见，我在 mounted() 生命周期方法中的 Vue.js 组件中使用了 JavaScript 函数。我试图转换它，但它不起作用。首先我需要说：// eslint-disable-next-line no-unused-varsvar lastDownX = 0我不知道为什么它会抱怨 lastDownX 未被使用。第二个是错误："[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventListener' of null"它抱怨：  handle.addEventListener('mousedown', function (e) {    isResizing = true    lastDownX = e.clientY  })有人可以帮忙转换吗？

Answer 1

如果元素不存在于 DOM 中，则First ofdocument.querySelector方法将返回。null您不能调用addEventListenernull。它之所以起作用，jQuery是因为 jquery 构造了一个单独的对象（称为 jQuery 对象）。一个 jQuery 对象看起来有点像这样：

{

  0: {...} // HTMLElement reference

  length: 1

} // jQuery object

该对象公开了一个 jQuery API，它具有on事件处理方法（无论是否存在实际 DOM 元素都可用）。这是 jQuery 的优点（也是缺点）。

另一方面，查询选择器方法返回HTMLElement. 如果该元素不存在于 DOM 中，则null返回。

现在假设该元素将在一定时间后出现在 DOM 中，您可以做两件事：

等待元素出现在 DOM 中，一旦它可用，就添加一个监听器函数。

在 JavaScript 中使用live事件（事件委托）。

我将向您展示第二种方法：

setTimeout(() => {

  document.querySelector('#container').innerHTML = `<button id="btn">Click</button>`;

}, 3000);

document.addEventListener('click', (e) => {

  if (e.target.id === 'btn') {

    alert('Click works!');

  }

});

<div id="container">

  A button will appear after 3 seconds. However, click event would still work.

</div>

如您所见，我正在使用e.target它来检测我在文档中单击了哪个元素（我附加了侦听器的位置）。一旦条件匹配，它就会触发alert. 这允许我们为最初不存在于 DOM 中的元素绑定事件。