addeventlistener click怎么利用冒泡

 <ul id="userList">
                    <li class="now">
                        <div class="photo">
                            <img src="../news_images/photo01.jpg" />
                        </div>
                        <div class="info">
                            <h2>哈哈</h2>
                            <p>呵呵 </p>
                        </div>
                        <span>11:04</span>
                    </li>
                    <li>
                        <div class="photo">
                            <img src="../news_images/icon_user.jpg" />
                        </div>
                        <div class="info">
                            <h2>会议</h2>
                            <p>我知道了。</p>
                        </div>
                        <span>10:20</span>
                    </li>
<ul>

上面的代码 userList中的li都是动态加载的，现在我想给userList用原生addeventlistener绑定click事件。
只有li响应事件，li的任何子元素都不会响应事件，
我的做法是
document.getElementById('userList').addEventListener('click', function (e) {
    var target = e.target;
    //alert(target.nodeName)
    if (target.nodeName == "LI") {
        alert(123)
    }
})
这样只有点在了li上才弹出123，但是在p元素，span元素，img元素上是不会弹出的，如何可以像jquery那样$('#userList').on('click','li',function(){
     alert(123)
})

问的什么东东，jquery的on原理就是和你那个一样，给容器加事件，然后判断当前点对象是否满足第二个参数，满足才执行函数