Question

我想在我的类 .task 由 javascript 创建后监听事件。当我使用 'dragstart' 事件时，它会抛出错误“无法读取 null 的属性 'addEventListener'”。当有人单击按钮时，我正在创建该 .task 类，然后它将由 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。如果在此行运行时页面上没有任务，您将遇到错误，因为接下来的代码行假定您在该变量中存储了一个 HTMLElement 对象。

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

一些示例代码：

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.
        */
    }
})

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

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

1 个答案: