js为动态生成/添加的元素绑定事件

有一段时间没有写js代码了，今天就说说js为动态生成/添加的元素绑定事件。

• 原理:

定位到需要绑定的元素(重点)->为那个元素绑定事件(自由发挥)。

• 当然，了解我的人都知道，我比较喜欢写原生JavaScript,不怎么用js库,那么就先来说说原生写法吧

• HTML

<div id="container">
    <input type="text" class="niceInp" id="niceInp" />
    <input type="button" value="create-nice-li" id="niceBtn" />
</div>

• JavaScript

<script>
    var niceInp = document.getElementById('niceInp');
    var niceBtn = document.getElementById('niceBtn');
    niceBtn.onclick = function(){
      var oli = document.createElement("li");
      oli.innerHTML=niceBtn.value;
      oli.id = "nice-li";
      var container = document.getElementById('container');
        container.insertBefore(oli,container.lastChild);
    };
    function gelegate(action,selector,callback）{
      document.addEventListener(action,function(e){
        if(selector==e.target.tagName.toLowerCase()||selector==e.target.className){
          console.log("111");
          callback();
        }
      })
    };
   gelegate('click','li',function(){console.log(222)});
</script>

• jquery方法，jquery方法有几种，我一般只选择使用on

$("parentDOM").on('event',"chriendDOM",function(){
    console.log('自由发挥');
})