javascript - 既然getElementsByTagName是动态获取的，为什么一定要在creatElement元素之后立刻添加点击事件？

Question

var aLi=oUl.getElementsByTagName('li');        

oBtn.onclick=function(){
    var oLi=document.createElement('li');
    oLi.innerHTML=oText.value;
    oLi.onclick=function(){
        if(this.className=='')
            this.className='active';
        else
            this.className='';
    };

    oUl.appendChild(oLi);

给动态获取li集合，给oBtn添加点击事件，会创建一个新的li在oUl下，我发现，只要把oLi的点击事件不写在var oLi=document.createElement('li');之后，而是把事件写在外面，点击发生的效果就只能发生在原有html生成的li上，而不能实现在新产生的li上，问题是getElementsByTagName('li')不是动态的么？
是不是说，如果我要给页面上所有原有和li和新生成的li都添加相同事件，不得不写两次点击事件呢？一次在新oLi生成时，一次给其他原有的li

Answer 1

你写在外面，oLi 这个变量就会未定义，报错

Answer 2

给未来的标签增加事件，这叫事件委托或者事件代理，实现原理很简单，通过在父元素里绑定事件，然后通过冒泡判断事件来自target就可以了，如果不会可以用jquery的on方法，可以实现