js 事件委托

HTML 结构

<ul>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
</ul>

事件委托示例

   // 获取第一个ul元素
    var oUl = document.getElementsByTagName('ul')[0];
    // 获取ul下所有的li元素
    var oLi = oUl.getElementsByTagName('li');

    // 把第一个li元素的背景颜色设置为红色
    oLi[0].style.background = 'red';

    // 当鼠标移到ul上时的处理函数
    oUl.onmouseover = function(ev) {
        // 兼容性处理，获取事件对象
        var ev = ev || window.event;
        // 获取事件源，即触发事件的元素
        var target = ev.target || ev.srcElement;
        // 如果事件源是li，则把li的背景颜色设置为红色
        if (target.nodeName.toLowerCase() == 'li') {
            target.style.background = 'red';
        }
    };

    // 当鼠标从ul移出时的处理函数
    oUl.onmouseout = function(ev) {
        // 兼容性处理，获取事件对象
        var ev = ev || window.event;
        // 获取事件源，即触发事件的元素
        var target = ev.target || ev.srcElement;
        // 如果事件源是li，则把li的背景颜色恢复默认值
        if (target.nodeName.toLowerCase() == 'li') {
            target.style.background = '';
        }
    }