事件侦听器可以在某些运行某些函数之后侦听事件吗？

Question

我想在我的 class .task 由 javascript 创建后收听一个事件。当我使用 'dragstart' 事件时，它会抛出错误“无法读取属性 'addEventListener' of null”。我正在创建那个 .task class 当有人点击按钮时它将被 javascript.

创建

function addTask(e) {
    e.preventDefault() 
    //Creating div
    const todoDiv = document.createElement('div');
    todoDiv.classList.add('task')
    todoDiv.setAttribute('draggable', 'true')


    todoList.appendChild(todoDiv);
    taskInput.value = ''
}

function delTask(e) {
    const item = e.target

    //Delete Todo
    if (item.classList[0] === 'trash-btn'){
        const todo = item.parentElement;

        //Animation
        todo.classList.add('fall')
        todo.addEventListener('transitionend', function() {
            todo.remove()
        })
    }
}    

// =========================== Drag property ===========================

const task = document.querySelector('.task')
const whiteBoxes = document.getElementsByClassName('wB')

task.addEventListener('dragstart', () => {
    console.log('hello')
})

task.addEventListener('dragend', () => {
    console.log('hII') 
})

谢谢

Answer 1

当你运行这行代码：const task = document.querySelector('.task')时，如果没有元素匹配task变量将存储值undefined。如果在这一行运行s 时您的页面上没有任何任务，您将遇到错误，因为接下来的代码行假定您在该变量中存储了一个 HTMLElement 对象。

要解决此问题，您有一个选择：您可以在创建任务时向您创建的每个任务添加一个事件侦听器，或者您可以向任务的父级添加一个事件侦听器，并仅使用事件委托有一个事件监听器。如果您使用事件委托，您将需要在事件中有一个条件，以确保用户正在与之交互的是您想要拖动的元素。

一些示例代码：

const todoList = document.querySelector('.todo-list')

todoList.addEventListener('dragstart', (event) => {
    if (event.target.matches('.task') {
        /* 
            Do something here with event.target.
            event.target is the element that the user is interactig with.
        */
    }
})

这是假设您在包含所有任务元素的元素上有 class 个 todo-list。

事件侦听器可以在某些运行某些函数之后侦听事件吗？

Can event listeners listen event after some running some function?

javascript

event-handling

事件侦听器可以在某些 运行 某些函数之后侦听事件吗？

Can event listeners listen event after some running some function?

javascript

event-handling

事件侦听器可以在某些运行某些函数之后侦听事件吗？