任务1：事件对象的使用
任务要求：在页面中放一个按钮，分别在早期版本的IE浏览器以及新版浏览器中单击按钮，获取单击该按钮的事件对象。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">获取event事件对象</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function (e) {
var event = e || window.event; // 获取事件对象的兼容处理
console.log(event);
};
</script>
</body>
</html>
任务2：事件委托的使用
任务要求：在页面中定义一个ul无序列表，实现当使用鼠标单击列表中的一项时，让该项的背景颜色发生改变。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>我是第 1 个li</li>
<li>我是第 2 个li</li>
<li>我是第 3 个li</li>
<li>我是第 4 个li</li>
<li>我是第 5 个li</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'pink';
});
</script>
</body>
</html>
原创视频
