如何在 ES6 模板字符串中绑定事件？答案

【问题标题】：How to bind event in ES6 template string?如何在 ES6 模板字符串中绑定事件？
【发布时间】：2016-07-04 03:49:34
【问题描述】：

有没有办法监听 #selectDate 元素的 onclick 事件，并且在点击时，item 变量也被传递给 onclick 函数？我正在使用 es6 模板生成 html 代码。我尝试使用${}，但实际上它会将内部的任何内容转换为字符串，这不是我想要的。

我还检查了类似的内容，但不知何故无法按预期工作..

renderDate(item) {
        let self = this;
        if (!item) {
            return "";
        }
        let checked =item.selected?"checked":"";

        tmp = `<div class="day-item  align-center" id="selectDate" key="${item.name}" onclick="">
                <div class="checkbox align-center justify-center ${checked}" ${checked}>
                    <span class="iconfont icon-check"></span>
                </div>
                <span class="text">${item.name}</span>
            </div>`
        return tmp
    }

【问题讨论】：

使用 DOM 而不是连接 HTML 位？
绑定项目是什么意思？你想在 onclick 中用它做什么？另外为什么首先使用onclick？您正在使用现代 javascript 来呈现这个......以及 1990 年的 onlcick 方法
@charlietfl 当我点击时，item 变量也被传递给 onclick 函数。
使用不显眼的事件绑定而不是内联，并且您在回调中有可用的对象
由于ìd 属性在整个文档中必须具有唯一值，并且您的模板指定了静态id 值，这是否意味着您只会调用此方法一次？

标签： javascript ecmascript-6

【解决方案1】：

这是一种方法：

class myClass {
  constructor() {
    this.onclick = null;
    this.item = null;
    // Add delegated click listener
    document.addEventListener('click', function (e) {
      // Only if click happens in #selectDate, and a click handler was defined:
      if (this.onclick && e.target.closest('#selectDate')) {
        this.onclick(e, this.item);
      }
    }.bind(this)); // `this` refers to this myClass object when clickListener is called
  }

  renderDate(item, onclick) {
    if (!item) {
        return "";
    }
    this.item = item;
    this.onclick = onclick;
    let checked = item.selected ? "checked" : "";
    
    let tmp = `<div class="day-item  align-center" id="selectDate" key="${item.name}" >
              <div class="checkbox align-center justify-center ${checked}" ${checked}>
                <span class="iconfont icon-check"></span>
              </div>
              <span class="text">${item.name}</span>
           </div>`;
    return tmp;
  }
}
  
let item = {
      selected: true,
      name: 'this is my text: click me',
      data: [1, 2, 3, 4] // some other data...
    },
    myObj = new myClass;

function processItem(e, storedItem) {
    console.log(
`You clicked element with key = "${e.target.closest('#selectDate').getAttribute('key')}".
Item = ${JSON.stringify(storedItem)}`
    );
}

// get the template, provide the onclick handler, and insert the HTML
document.getElementById('container').innerHTML = myObj.renderDate(item, processItem);

<h1>My title</h1>
<div id="container"></div>

当你的类的一个实例被创建时，一个监听器被添加到文档中。它过滤发生在selectDate 元素或其子元素之一上的点击事件。在这种情况下，将调用自定义 onclickcallback，并将 item 对象传递给该回调。

renderDate 的调用是带item 对象的，也是上面提到的回调。我不清楚您是否希望在类中定义回调，或者由调用者提供，所以我选择了第二种可能性。更改代码以使用第一个模式应该不难。

【讨论】：