es6 模板字符串中绑定事件的方法

最新推荐文章于 2025-06-12 17:16:37 发布

AspNetSunny

最新推荐文章于 2025-06-12 17:16:37 发布

阅读量8.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6 文章标签： es6 delegation babel

本文链接：https://blog.youkuaiyun.com/sunnywuxian/article/details/101544332

ES6 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ES6的模板字符串和事件委托技术进行DOM渲染和事件处理，通过具体示例展示了如何在复杂DOM结构中高效地绑定和响应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

step1: 模板字符传中写法

renderDom() {
        return `
        <div data-action="goDetail" data-url="${item.clickUrl}" class="uliao-news-item">
            <h1>${item.title}</h1>
        </div>
        `;
}

step2: 这里我使用es6 事件委托的方式

class ULiaoNews {

    constructor(elem) {
        elem.onclick = this.onClick.bind(this);
    }

}

step3:事件执行

这里进行了判断只有在指定的dom上才可执行不然无法获取到dataset参数

onClick(event) {
        let closest = event.target.closest('.uliao-news-item');
        if (closest) {
            let action = closest.dataset.action;
            this[action](closest.dataset.url);//执行下面的跳转函数
        } 
    }

 goDetail(url) {
        location.href = url;
    }

参考文章：http://javascript.info/event-delegation