事件代理，子元素冒泡

Question

<ul id="oul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
(function(){
    var oUl=document.getElementById("oul");
    oUl.addEventListener('click',show,false);
    function show(e)
    {
        e=e||window.event;
        var targetElement=e.target||e.srcElement;
        if(targetElement.nodeName.toLowerCase()==="li"){
        alert(targetElement.innerHTML);
        }
    }
})();
</script>

为什么给li会冒泡呢，它自身没有click事件，点击的时候会冒泡到ul

Answer 1

不是很明白下面这句话你想问什么

为什么给li会冒泡呢，它自身没有click事件，点击的时候会冒泡到ul

首先事件委托利用的是冒泡。

点击 li ,click会一直冒泡到oul,而oul下所有的列表都是 oul的子节点.

也就是说子节点的事件会冒泡到oul中，在oul中判断触发事件的是哪一个子节点，处理即可。