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

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