本文解析JavaScript事件委托的核心原理，即利用事件冒泡将子元素事件绑定至父级，从而提升性能并简化动态元素管理。内容涵盖event.target与srcElement的兼容获取方式，结合HTML与JS示例代码，展示如何在IE及标准浏览器中实现稳定的事件监听。
事件委托概述
本文简要介绍JavaScript中事件委托的具体使用方法及其主要优势，供读者参考学习。
核心原理与优势
事件委托的核心机制是利用事件冒泡原理，将原本应绑定在子元素上的事件监听器移至其父级元素上执行。这种做法的主要好处在于显著提升页面性能，并且当动态添加新子元素时，无需重新绑定事件即可自动继承原有的交互效果。
事件源获取方法
在事件处理函数中，获取触发该事件的具体元素（即事件源）是关键步骤。无论事件发生在哪个层级，用户实际操作的元素即为当前的事件源。
针对不同浏览器环境，获取事件源的方法存在差异。在IE浏览器中，可通过 window.event.srcElement 属性来获取事件源对象。
代码实现示例
在符合W3C标准的现代浏览器中，则使用 event.target 属性来获取事件源，并可进一步通过 target.nodeName 判断具体触发的HTML标签类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
var iNow=5;
//事件源的方法依然保留父级事件！
oUl.onmouseover=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='red';
}
}
oUl.onmouseout=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}
oBtn.onclick=function()
{
iNow++;
var oLi=document.createElement('li');
oLi.innerHTML=111*iNow;
oUl.appendChild(oLi);
}
}
</script>
</head>
<body >
<input type="button" value="添加" id='btn1'>
<ul id='ul1'>
<li>11111</li>
<li>22222</li>
<li>3333333</li>
<li>44444444</li>
<li>66666666</li>
</ul>
</body>
</html>
以下是具体的代码应用示例：