在JS中如何實現動態添加元素

這篇文章主要為大家介紹了關於JS動態添加元素及綁定事件造成程序重複執行的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

前言

本文主要跟大家分享前段時間遇到的bug,這個Bug是關於jquery 的on方法綁定互動事件，類似於$('#point').on('click','.read-more',function () {})這樣的程式碼造成的程式重複執行，很多人在文章裡寫到了，也說了用off方法來解綁，但都未能點出問題的本質，幾乎都忽略了問題的本質其實是事件委託造成的。

話不多說，上點天天看到的程式碼：

第一種：  

 $(document).on('click', function (e) {
 consol.log('jquery事件绑定')
 });

第二種：  

 document.addEventListener('click',function (e) {
 consol.log('原生事件绑定')  
 })；

#第三種：  

 var id = setInterval(function () {
 console.log('定时器循环事件绑定')
 },1000)；

上面的程式碼，相信不少同盟，天天都會寫到，看似簡單的事件綁定，卻常常能為我們帶來意想不到的結果，特別是在這個SPA，應用AJAX頁面局部刷新如此盛行的時代。

那什麼是事件綁定，造成的程式重複執行呢？這個事情要說清除，好像不是那麼簡單,還是用一段測試程式碼來說明吧。你可以拷貝到本地，自己試試： 

 
 


点击
fdfsdf

 

以上是我為說清楚這個事情寫的一段測試程式碼,可以拷貝下來試試。當我們點選頁面的按鈕，觸發呼叫example.getData()這個函數，模擬ajax取得資料成功後，就會根據局部刷新頁面內元素類別名為point的內容，同時會為載入這個內容中的read-more A標籤綁定一個事件，就這樣我們想要的效果出現啦，當元素第一次加載時，頁面正常，'事故發生點'彈出一次，當二次刷新觸發後，你會發現其彈出了兩次，當第三次時，你會發現，其彈三次，以此類推。 。 。 。

OMG，這個程式到底怎麼了，我明明每次事件綁定前,前面綁定的元素都刪除了，為什麼，被刪除的屍體感覺還在動作，好吧，上面就是我第一次遇到這個情況發出的感嘆。

最後是問身邊的大神，才突然領悟，原來綁定一直都在，而這個綁定被保存在一個叫做事件隊列的地方，他不在循環執行的主線程中，畫了一張需要默契才能看懂的圖，勉強看。

事件佇列

還原真相

##其實上面那一段程式碼是為了測試而刻意寫的程式碼，除了計時器外，其他兩個點擊事件換個正常的寫法，重複執行的情況是不會出現的，正常的程式碼：  

 // jquery 事件直接绑定的写法；
 $('#point .read-more').on('click',function () {
  alert('事故发生点');
 })
 // 原生JS 事件直接绑定的写法；
 document.querySelector('.read-more').addEventListener('click',function (e) {
  alert('事故发生点');
 })

看出差別了嗎?其實就是不用冒泡來事件委託，而是直接給新增的元素綁定事件。所以

Dom事件是講道理的，動態加入的元素，再動態為此綁定事件，待元素被刪除後，與其綁定的對應事件其實是會從事件綁定佇列中刪除的 ，而非如上面測試程式碼，給人的感覺是元素移除後，但其綁定的事件還在記憶體中。 但請記住，這是個誤會，上面測試的程式碼之所以給人這種錯覺，是因為我們並沒有為動態添加的元素綁定事件，而僅僅是用了事件委託的形式，實際上事件是綁定在#point元素上的，其一直存在，利用事件冒泡來讓程式知道我們點擊了動態添加的連結元素。測試中刻意用原生js去重現了這次事件委託，jquery的on綁定事件其實原理基本上相同。

document.querySelector('body').addEventListener('click',function (e) {
 if(e.target.classList.contains('read-more')){
  alert('事故发生点');
 }
})

解除bug的那些方法

#計時器##這個是最容易犯的錯誤，當然也是最易解的錯誤，因為設定定時器時，其會傳回一個數值，這個數值應該是事件隊列此定時器中的一個編號吧，類似於9527；步驟就是設定一個全域變數來保持這個回傳值id，每次設定計時器時，先透過id清除已經設定過的定時器    

 clearInterval(intervalId); //粗暴的写法
 intervalId&&clearInterval(intervalId); //严谨的写法
 intervalId=setInterval(function () {
  console.log('fdfdfg');
  },2000);

Dom事件

#其實上面我們已經說過，最直接的辦法就是不採用事件委託，而是採用直接綁定；如果確實要用事件委託來綁定事件，那就是解綁定。在jquery中提供了unbind函數來解綁事件，不過在jquery 1.8版本以後，這個方法已經不推薦了，而是推薦off方法。例如上面的on事件委託的方式，要解綁，可採用語句

$('#point').off('click','.read-more')

。

有缺陷的解决方案，添加flag

很好理解，第一次绑定后，flag置位，下一次在执行这个绑定时,程序就知道在这个节点上已经有了绑定，无需再添加，具体操作就是：  

 var flag = false;
 var example = {
 getData: function () {
  var data = {
  content: 'df' + count++,
  href: ''
  };
  this.renderData(data);
 },
 renderData: function (data) {
  document.getElementById('point').innerHTML = '
this is a ' + data.content + '点此查看更多
';
  !flag && $('#point').on('click', '.read-more', function () {
  alert('事故发生点'+data.content);
  });
  flag = true;
 }
 };

从逻辑上，看起来没有问题，但仔细观察，发现这是有问题的。当我们第二次，第三次刷新时，弹出框的内容还是和第一次模拟刷新后点击后弹出的内容一致，还是'事故发生点df1'，而非和内容一样递增，为什么呢，感觉事件队列里面的回调函数被单独保存起来了，data被深拷贝了，而不再是一个引用。确实有点难理解，我也不知道到底是为什么，如果哪位能说清楚，还请一定告知。

结个尾写在最后，其实平常写一些程序时，事件绑定，造成程序重复执行这些情况很少发生，其通常会出现在我们写插件的时候，插件需要适应多种调用环境，所以在插件内部做到防止事件重复绑定的情况非常重要。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用node.js如何创建子进程（详细教程）

使用ES6如何实现单例模式

如何把Angular项目部署到nginx上

在vue中使用v-model如何实现父子组件通信

在react中有关组件通信有哪些方法？

以上是在JS中如何實現動態添加元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！