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

发表于

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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选取）：

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

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

1
2
3
4
5
6
7
8
9
10
<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"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 定义一个方法
/*
 * 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;

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

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

1
2
3
4
5
6
7
document.getElementById(''ul).addEventListener("click", function () {
  console.log(123);
})
// 或者
document.getElementById(''ul).onclick = function () {
  console.log(123);
}

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