關於js中繫結事件失效問題
阿新 • • 發佈：2018-12-01
相信很多開始學習前端開發的朋友都發生過繫結事件失效的問題，那麼究竟是什麼原因使得事件失效呢？
這裡作者以jquery庫編寫作為例子。
第一種：直接失效。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //這一行語句的意思是等所有DOM樹載入完成後執行繫結事件工作 $("button").click(function(){ //點選事件 $("p").hide(); //隱藏p節點物件 }); }); </script> </head> <body> <h2>This is a test</h2> <p>This is a test.</p> //點選按鈕隱藏此段落 <button type="button">Click me</button> </body> </html>
上面的程式碼中若沒有下面此行程式碼，事件是繫結不了的，這是因為在載入玩DOM樹之前繫結事件就已經執行了，這時雖然執行了卻找不到節點物件，所以事件會失效。
$(document).ready(function(){ //這一行語句的意思是等所有DOM樹載入完成後執行繫結事件工作如果要不使用ready()，使事件繫結則需要將js程式碼編寫在html末端，這樣做的原因是使瀏覽器先載入完頁面DOM樹資訊，再載入js程式碼段，這樣繫結的事件就可以找到對應的節點物件了。
第二種：頁面跳轉或者區域性重新整理導致繫結事件失效。
其實一切js繫結事件失效的原因根本上都是因為找不到DOM物件或著DOM物件被替換（當然寫錯了程式碼那種就不要說了。。）
我們依舊以上面的程式碼來講。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //這一行語句的意思是等所有DOM樹載入完成後執行繫結事件工作 $("button").click(function(){ //點選事件 $("p").hide(); //隱藏p節點物件 }); }); </script> </head> <body> <h2>This is a test</h2> <p>This is a test.</p> //點選按鈕隱藏此段落 <div id="div"><button type="button">Click me</button></div> </body> </html>
如果此時你的button節點的被包裹於一個用於區域性重新整理的div塊。
1.當頁面載入完成後，div程式碼塊中並沒有內容，這時你通過區域性重新整理使button節點顯示出來，此時注意：頁面已經載入完成了然而你卻是在它載入完成後動態的將事件的繫結物件調出來的，顯然此時繫結事件會失效。（這裡區域性重新整理的程式碼不給出，讀者根據程式碼和文字聯想即可，道理很簡單）。
2.頁面載入完成，div初次載入就有button節點，此時是沒有問題的。然後使用區域性重新整理改變div的內容後，再使用區域性重新整理重新整理回來button節點時，此時注意：初次載入的時候事件已經繫結過了節點物件，你使用區域性重新整理重新刷回來時雖然節點名稱引數都是一模一樣的但是已經不是同一個DOM物件了，所以重新刷回來後事件會失效。