jQuery动态绑定事件或者原生js动态绑定事件

说一个这周写前后端交互时遇到的一个印象深刻的问题——动态绑定事件。

一、jQuery

一般我们给节点绑定事件使用的都是这样的形式

$("#btns").click(function () {  
  $("#myModalTwo").show();
  $("#idTwo").val(this.parentNode.parentNode.children[0].innerHTML);
  $("#nameTwo").val(this.parentNode.parentNode.children[1].innerHTML);
  $("#priceTwo").val(this.parentNode.parentNode.children[2].innerHTML);
  $("#describeTwo").val(this.parentNode.parentNode.children[3].innerHTML);
  $("#classingTwo").val(this.parentNode.parentNode.children[4].innerHTML);
  $("#numberTwo").val(this.parentNode.parentNode.children[5].innerHTML);
})

但当我们遇到动态添加的节点，这两种方式就不再起作用了，那么引入今天的主题了，怎样给动态添加的节点绑定事件呢？？？？可以使用下面的jQuery语法：

$("#start,#end").on("click",function(){
　　　　alert("The paragraph was clicked.");
 
 });

应用到我的代码上就是这样：

$("#mytable").on("click", ".btns", function C() {
  $("#myModalTwo").show();
  $("#idTwo").val(this.parentNode.parentNode.children[0].innerHTML);
  $("#nameTwo").val(this.parentNode.parentNode.children[1].innerHTML);
  $("#priceTwo").val(this.parentNode.parentNode.children[2].innerHTML);
  $("#describeTwo").val(this.parentNode.parentNode.children[3].innerHTML);
  $("#classingTwo").val(this.parentNode.parentNode.children[4].innerHTML);
  $("#numberTwo").val(this.parentNode.parentNode.children[5].innerHTML);
});

这样问题就迎刃而解了！！！

后来我又更深层次的去了解了一下这种on方法动态绑定的用法，常用的可以分为以下两类：

（1）多个选择器绑定同一个事件

$("#start,#end").on("click",function(){
});

（2）多个事件绑定同一个函数

$("p").on("mouseover mouseout",function(){ 
})

 二、原生js

（1）动态生成的DOM元素上添加函数

//绑定函数
<button onclick="func()"></button>
//定义函数
function func(){
    
}    

（2）利用for循环

准备工作：给想绑定函数的动态元素添加类名classname

//获取所有动态添加的有classname类名的元素    
const all=document.getElementsByClassName('classname')
//for循环添加事件
for(let i=0;i<all.length;i++){
    all[i].addEventListener('click',function(){})
}