通过 javascript 将函数添加到元素

Question

所以我有一个循环来初始化数组中的元素和属性，并且我已经成功添加了我需要的所有内容，除了一件事，一个函数。有问题的循环如下：for (const character of result) {    let image = document.createElement("img");    image.src = character.src;    image.setAttribute('data-jval', character.jval);    image.setAttribute('id', character.id);    image.setAttribute('class', character.class)    image.setAttribute('draggable', 'true')    // the below function isn't being added to the divs    image.addEventListener('ondragstart', function(event){        let data = event.target.dataset.jval;        event.dataTransfer.setData("text", data);    })    let wrapper = document.createElement('div');    wrapper.appendChild(image);    section.appendChild(wrapper);  }我试图添加到我的元素中的功能是：  function drag(event) {    let data = event.target.dataset.jval;    event.dataTransfer.setData("text", data);  }在尝试用 JavaScript 创建元素之前，我将它们放在 HTML 中，它们看起来像这样：<img data-jval="a" id="jval-a" src="./images/あ.png" class="j-char-img" draggable="true"  ondragstart="drag(event)"/>但是当我用循环重新创建它时，它看起来像这样，缺少 ondragstart="drag(event"<img src="/images/あ.png" data-jval="i" id="jval-i" class="j-char-img" draggable="true">如果我的其余代码有用，我也可以发布它。

Answer 1

只需“dragstart”而不是“ondragstart”事件：

for (const character of result) {

    let image = document.createElement("img");

    image.src = character.src;

    image.setAttribute('data-jval', character.jval);

    image.setAttribute('id', character.id);

    image.setAttribute('class', character.class)

    image.setAttribute('draggable', 'true')

    // the below function isn't being added to the divs

    image.addEventListener('dragstart', drag);

    let wrapper = document.createElement('div');

    wrapper.appendChild(image);

    section.appendChild(wrapper);

  }

  function drag(event) {

    let data = event.target.dataset.jval;

    event.dataTransfer.setData("text", data);

  }

因此，基本上，当您编写内联事件处理程序时，您可以在事件之前添加前缀on，就像之前将事件处理程序放入标记中一样img。对于任何其他事件也是如此：

click => onclick

submit => onsubmit

keydown => onkeydown

Answer 2

#try to add Semicolon;

    image.setAttribute('class', character.class);

    image.setAttribute('draggable', 'true');

    // the below function isn't being added to the divs

    image.addEventListener('ondragstart', function(event){

        let data = event.target.dataset.jval;

        event.dataTransfer.setData("text", data);

    });