事件委托和阻止事件冒泡

废话不多说，代码走一波

DOM结构如下

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>

li标签是后期动态渲染上去的，但是我们需要给li标签添加点击事件,这时候就要用到事件委托了

原生js写法代码走一波

ul.onclick = function(ev){
//兼容写法
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//这个判断的应为是要委托给li的事件（实际上点击会得到最底层的dom，如果你的是其他的DOM比如说是个div，你就要替换成div）
    if(target.nodeName.toLowerCase() == 'li'){
        console.log(target);//最后点击执行的代码
    }
};.onclick = function(ev){
//兼容写法
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//这个判断的应为是要委托给li的事件（实际上点击会得到最底层的dom，如果你的是其他的DOM比如说是个div，你就要替换成div）
    if(target.nodeName.toLowerCase() == 'li'){
        console.log(target);//最后点击执行的代码
    }
};

jq的事件委托就更好理解了

代码走起

$("ul").on("click","li",function(){
    //事件委托在ul 上，点击ul 里面的li 时触发点击事件
})("ul").on("click","li",function(){
    //事件委托在ul 上，点击ul 里面的li 时触发点击事件
})

顺提下阻止事件冒泡

ul.onclick = function(ev){
    ev.stopPropagation()//阻止事件冒泡
}.onclick = function(ev){
    ev.stopPropagation()//阻止事件冒泡
}