事件代理——jQuery.bind()方法

首先是样式美化（仅仅是为了好看）：

ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}

li {
    display: inline-block;
    font-size: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-radius: 20%;
    transition: border-radius 1s, background-color .5s, color .5s;
}

li:hover {
    background-color: rgba(0,0,0,.3);
    border-radius: 50%;
    color: #fff;
}

html内容（一个容器，加上id方便js选取）：

<ul id="ul"></ul>

这里我们使用artTemplate做数据的渲染：

<script type="text/javascript" src="js/template-web.js" ></script>
<script type="text/template" id="tpl">
    <% for(var i = 0; i < 9; i++){ %>
        <% if (i<num) { %>
            <li><%= i %></li>
        <% } else { %>
            <li><%= i %></li>
        <% } %>
    <% } %>
</script>

注意引入template-web.js
将模板书写到script标签里面，注意：type="text/template"

// 定义一个方法
/*
 * pr 代理事件的父级容器
 * ch 绑定时间的子元素
 * data 需要传入的数据
 * fn 回调
 */
function bind (pr, ch, data, fn) {
    document.getElementById(pr).addEventListener('click', function (event) {
        if (event.target.localName === ch) {
            fn.call(event.target, da)
        }
    })
}
// 1.先绑定时间
bind('ul', 'li', {name:'张三'}, function (d) {
    console.log(d, this.innerHTML)
})

// 定义要数据
var da = {
    num: 5
}

// 用模板生成字符串
var html = template('tpl', da);
// 在容器`ul`中插入元素
document.getElementById('ul').innerHTML = html;

在上面的代码中，我们先将事件绑定，在通过模板拼接字符串，在页面中插入元素

如果不通过事件代理的方式直接通过绑定事件

document.getElementById(''ul).addEventListener("click", function () {
  console.log(123);
})
// 或者
document.getElementById(''ul).onclick = function () {
  console.log(123);
}

再之后插入的元素 是没有click事件的。