方法一：change事件
change事件，在元素的值發生改變時觸發，適用於文本域、textarea、select 。 或調用change()方法時能夠監聽。因此，咱們能夠模擬change爲非表單元素監聽change()事件。html
1 2 <!Doctype> 3 4 <html> 5 6 <head> 7 8 <meta charset="utf-8"> 9 10 <title>change事件</title> 11 12 <style> 13 14 #container { 15 16 min-height: 120px; 17 18 border: 1px solid #aaa; 19 20 } 21 22 </style> 23 24 </head> 25 26 <body> 27 28 <div id="container"> 29 30 31 32 </div> 33 34 <button type="button" id="btn">add "aaa" for div</button> 35 36 37 38 39 40 <script src="jquery-1.11.3.js"></script> 41 42 <script> 43 44 45 46 function changes(){ 47 48 alert("changes"); 49 50 } 51 52 53 54 $("#btn").click(function() { 55 56 $("#container").append("aaa").change(); 57 58 }); 59 60 $("#container").bind("change", changes); 61 62 </script> 63 64 </body> 65 66 </html>
以上demo中，點擊按鈕，爲div中動態添加內容，添加內容後，手動調用change()方法，爲div模擬出change事件。jquery
注： 1.以上demo中是追加的內容，因此沒有判斷div的內容是否發生變化，若是在其餘場景下，能夠本身判斷div內容是否發生了變化瀏覽器
2 .只要兼容jquery的瀏覽器均可以兼容此方法。app
方法二：DOMNodeInserted事件
經測試，這個DOMNodeInserted事件能夠監聽到非表單元素的內容的變化，只有在插入節點時有效，相反DOMNodeRemoved事件，只有在移除節點時有效。DOMNodeInserted事件是js提供的一個dom2級事件(具體什麼意思，我尚未弄懂，弄懂後回來補充，此處省略1000字。。。)，總之，是能夠監聽到的。dom
1 2 <!Doctype> 3 4 <html> 5 6 <head> 7 8 <meta charset="utf-8"> 9 10 <title>change事件</title> 11 12 <style> 13 14 #container { 15 16 min-height: 120px; 17 18 border: 1px solid #aaa; 19 20 } 21 22 </style> 23 24 </head> 25 26 <body> 27 28 <div id="container"> 29 30 31 32 </div> 33 34 <button type="button" id="btn">add "aaa" for div</button> 35 36 37 38 39 40 <script src="jquery-1.11.3.js"></script> 41 42 <script> 43 44 45 46 function changes(){ 47 48 alert("changes"); 49 50 } 51 52 53 54 $("#btn").click(function() { 55 56 $("#container").append("aaa"); 57 58 }); 59 60 $("#container").bind("DOMNodeInserted", changes); 61 62 </script> 63 64 </body> 65 66 </html>
注： 此方法存在ie8及如下瀏覽器中失效測試
方法三：定時任務
能夠經過定時任務來監聽非表單元素的內容變化，若是以上兩種方法均不適用的狀況下，能夠嘗試此種方法spa
1 2 <!Doctype> 3 4 <html> 5 6 <head> 7 8 <meta charset="utf-8"> 9 10 <title>change事件</title> 11 12 <style> 13 14 #container { 15 16 min-height: 120px; 17 18 border: 1px solid #aaa; 19 20 } 21 22 </style> 23 24 </head> 25 26 <body> 27 28 <div id="container"> 29 30 31 32 </div> 33 34 <button type="button" id="btn">add "aaa" for div</button> 35 36 37 38 39 40 <script src="jquery-1.11.3.js"></script> 41 42 <script> 43 44 45 46 function changes(){ 47 48 alert("changes"); 49 50 } 51 52 53 54 $("#btn").click(function() { 55 56 $("#container").append("aaa"); 57 58 }); 59 60 61 62 var div = $("#container").html(); 63 64 setInterval(function() { 65 66 var divNew = $("#container").html(); 67 68 if(div != divNew) { 69 70 changes(); 71 72 div = divNew; 73 74 } 75 76 }, 100); 77 78 </script> 79 80 </body> 81 82 </html> 83