社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 在JS中如何實現動態添加元素

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

亚连
亚连
Jun 22, 2018 pm 01:55 PM
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頁面局部刷新如此盛行的時代。

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<button class="add_but">点击</button>
<p id="point">fdfsdf
</p>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> 
<script>
 var count=1;
 var example = {
 getData:function () {
  var data ={
  content:&#39;df&#39;+count++,
  href:&#39;&#39;
  };
  this.renderData(data);
 },
 renderData:function (data) {
  document.getElementById(&#39;point&#39;).innerHTML=&#39;<p>this is a &#39;+data.content+&#39;点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></p>&#39;;
  $(&#39;#point&#39;).on(&#39;click&#39;,&#39;.read-more&#39;,function () {
  alert(&#39;事故发生点&#39;);
 })
/*  setInterval(function () {
  console.log(&#39;fdfdfg&#39;);
  },2000);*/
  /*用冒泡来绑定事件，类似于Jquery的on绑定事件*/
 /* document.querySelector(&#39;body&#39;).addEventListener(&#39;click&#39;,function (e) {
  if(e.target.classList.contains(&#39;read-more&#39;)){
   alert(&#39;事故发生点&#39;);
  }
  })*/

 }
 } ;
 document.querySelector(&#39;.add_but&#39;).addEventListener(&#39;click&#39;,function (e) {
 example.getData();
 e.stopImmediatePropagation();
 });
</script>
</body>
</html>
登入後複製

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

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

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

事件佇列

還原真相

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

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

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

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

document.querySelector(&#39;body&#39;).addEventListener(&#39;click&#39;,function (e) {
 if(e.target.classList.contains(&#39;read-more&#39;)){
  alert(&#39;事故发生点&#39;);
 }
})
登入後複製

解除bug的那些方法

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

 clearInterval(intervalId); //粗暴的写法
 intervalId&&clearInterval(intervalId); //严谨的写法
 intervalId=setInterval(function () {
  console.log(&#39;fdfdfg&#39;);
  },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: &#39;df&#39; + count++,
  href: &#39;&#39;
  };
  this.renderData(data);
 },
 renderData: function (data) {
  document.getElementById(&#39;point&#39;).innerHTML = &#39;<p>this is a &#39; + data.content + &#39;点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></p>&#39;;
  !flag && $(&#39;#point&#39;).on(&#39;click&#39;, &#39;.read-more&#39;, function () {
  alert(&#39;事故发生点&#39;+data.content);
  });
  flag = true;
 }
 };
登入後複製

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

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

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

相关文章：

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

使用ES6如何实现单例模式

如何把Angular项目部署到nginx上

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

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

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

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7820
15
Java教學
1647
14
CakePHP 教程
1402
52
Laravel 教程
1300
25
PHP教程
1238
29
顯示更多
Related knowledge
建議：優秀JS開源人臉偵測辨識項目 建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

如何使用JS和百度地圖實現地圖平移功能 如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

如何使用JS和百度地圖實現地圖點擊事件處理功能 如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：

如何使用JS和百度地圖實現地圖熱力圖功能 如何使用JS和百度地圖實現地圖熱力圖功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles