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

是否有办法监听

#selectDate

元素的onclick事件，并在单击时将

项

变量传递给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
    }

renderDate（项目）{
让自我=这个；
如果（！项）{
返回“”；
}
let checked=项目。选中“checked”：；
tmp=`
${item.name}
`
返回tmp
}

这里有一种方法：

class-myClass{
构造函数（）{
this.onclick=null；
this.item=null；
//添加委派的单击侦听器
document.addEventListener（'click'，函数（e）{
//仅当单击发生在#selectDate中，并且定义了单击处理程序时：
if（this.onclick&&e.target.closest（'#selectDate'））{
this.onclick（e，this.item）；
}
}.bind（this））；//`this`在调用clickListener时引用此myClass对象
}
renderDate（项，onclick）{
如果（！项）{
返回“”；
}
this.item=项目；
this.onclick=onclick；
让选中=项。选中？“选中”：；
设tmp=`
${item.name}
`;
返回tmp；
}
}
让项目={
选择：正确，
名称：'这是我的文本：单击我'，
数据：[1,2,3,4]//其他一些数据。。。
},
myObj=新的myClass；
函数processItem（e，storedItem）{
console.log(
`您使用key=“${e.target.closest（'#selectDate'）.getAttribute（'key'）}”键单击了元素。
Item=${JSON.stringify（storedItem）}`
);
}
//获取模板，提供onclick处理程序，并插入HTML
document.getElementById（'container'）.innerHTML=myObj.renderDate（item，processItem）
我的标题
使用DOM而不是连接HTML？绑定项到底是什么意思？你想在onclick中用它做什么？还有，为什么首先要使用
onclick
？您正在使用现代javascript来呈现这一点……以及20世纪90年代的onlickmethod@charlietfl当我单击时，
item
变量也会传递给onclick函数。使用不引人注目的事件绑定而不是内联，您可以在回调中使用对象，因为
ìd
属性在整个文档中必须具有唯一的值，并且您的模板指定了一个静态
id
值，这是否意味着您将只调用此方法一次？