事件代理 - javascript delegate dom元素

Question

<

p id="parent">


<p id="child"></p>




<

p>


document.querySelector("#parent").addEventListener("click",function(e){
        var target = e.target || e.srcElement;
        if(target.id == "child"){
            //do something;
        }
    })

在上面我们在parent 上监听 click事件，如果来自child，那么就do something，但是如果是下面的情况如何实现

<p id="parent">
    <p id="child">
        <p></p>
    </p>
<p>

我点击child里面那个没有任何id或者class的p, 冒泡到child上，再冒泡到parent上，我也要触发do something。
因为此时e.target 是那个未命名的p，所以不能采取原来的方法，此时怎么做

Answer 1

你总是需要有办法去标识那个 p 的，如果唯一的情况，可以

javascriptswitch (target.id) {
    case "child":
        // do something 1
        break;
    case "parent":
        // do something 2
        break;
    default:
        // do something other
}

如果有多个没法标识的p……那你还是加个标识来得快些

Answer 2

e.target.parentNode.id == "child"