master

分支 (1)

管理

管理

master

geyao
/
事件委托220401.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>事件委托</title>
	</head>

	<body>
		<ul>
			<li>11111</li>
			<li>22222</li>
			<li>33333</li>
			<li>44444</li>
			<li>55555</li>
		</ul>
		<script>
			// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
			// ul有一万个li 进行事件绑定
			// var itemli = document.getElementsByTagName('li')
			// for (var i = 0; i < itemli.length; i++) {
			// 	itemli[i].onclick = (function (n) {
			// 		return function () {
			// 			console.log(n + itemli[n].innerHTML)
			// 		}
			// 	})(i)
			// }
			var ul = document.querySelector('ul')
			ul.onclick = function (e) {
				e = e || window.event //这一行及下一行是为兼容IE8及以下版本
				var target = e.target || e.srcElement
				if (target.tagName.toLowerCase() === 'li') {
					var li = this.querySelectorAll('li')
					index = Array.prototype.indexOf.call(li, target)
					alert(target.innerHTML + index)
				}
			}
			var ul = document.querySelector('ul');
			ul.addEventListener('click', function(e) {
			    // alert('点我应有弹框！');
			    // e.target 这个可以得到我们点击的对象
			    e.target.style.backgroundColor = 'pink';
			})
			// 点击下面的li变红
		</script>
	</body>
</html>