Ie9以下浏览器中的事件对象是放在全局中的window.event;
解决兼容性:event = event || window.event
事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变):
事件委托机制:利用事件冒泡的原理,把本应添加给某元素上的事件委托给他的父级(外层)
event.srcElement || event.target;(点击的目标对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
width: 100px;
height: 100px;
border:2px solid red;
}
</style>
</head>
<body>
<table >
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</body>
<script>
var tab = document.getElementsByTagName("table")[0];
tab.onclick = function (event) {
var eventTarget = event.srcElement||event.target
//点击子级对象改变颜色
eventTarget.style.backgroundColor = "black";
// 阻止事件冒泡
// event.stopPropagation();
}
</script>
</html>
若有不足请多多指教!希望给您带来帮助!