MozTW 討論區 https://forum.moztw.org/ |
|
使用 addEventListener 時的一個大問題 https://forum.moztw.org/viewtopic.php?f=8&t=17984 |
第 1 頁 (共 2 頁) |
發表人: | Merci chao [ 2007-03-14, 20:09 ] |
文章主題 : | 使用 addEventListener 時的一個大問題 |
首先, 有這樣的兩個按鈕: 代碼: <hbox> <button id="a" label="按鈕A"/> <button id="b" label="按鈕B"/> </hbox> 然後用這個 function 為它們加入 click 事件: 代碼: add: function() {
document.getElementById("a").addEventListener("click", function() { this.setAttribute("label", this.getAttribute("label") + "1"); }, false); document.getElementById("b").addEventListener("click", function() { var button = document.getElementById("a"); button.parentNode.appendChild(button); }, false); } 再試試按一下 A, 它的 label 能成功地不停加入 1 字 最後按一下 B, A 也能成功地放到 B 後面 但再按 A 的時候, 它的 click 事件就失效了 ![]() 請問大家, 應該如何解決這個問題呢 ![]() 感謝 ![]() |
發表人: | 訪客 [ 2007-03-14, 21:04 ] |
文章主題 : | |
B 加入 A 後, 就有兩個 id 為 'a' 的 button, 你想會有什麼事發生? |
發表人: | Merci chao [ 2007-03-15, 13:24 ] |
文章主題 : | |
Anonymous 寫: B 加入 A 後, 甚麼 B 加入 A ????
就有兩個 id 為 'a' 的 button, 你想會有什麼事發生? 哪裏會出現兩個 A????? ![]() 代碼: button.parentNode.appendChild(button);
這一段是把 A 從 hbox 中移除, 再放進 hbox 裏做為 lastChild 會有甚麼事發生呢??? |
發表人: | legnaleurc [ 2007-03-15, 13:55 ] |
文章主題 : | |
Merci chao 寫: Anonymous 寫: B 加入 A 後, 甚麼 B 加入 A ????就有兩個 id 為 'a' 的 button, 你想會有什麼事發生? 哪裏會出現兩個 A????? ![]() 代碼: button.parentNode.appendChild(button); 這一段是把 A 從 hbox 中移除, 再放進 hbox 裏做為 lastChild 會有甚麼事發生呢??? 不是吧.... 你那個動作只是在A的父節點底下新增一個名為A的html element 所以會變成有兩個一模一樣的元素 應該是先用removeChild()再用insertBefore() 吧? |
發表人: | kourge [ 2007-03-15, 14:02 ] |
文章主題 : | |
應該先 removeChild() 再插入元素。元素不會因為從 DOM 移除掉了以後就消失,只要你的變數裡有元素,還可以重新插入到其他地方。 當然更保險的做法是 .cloneNode(true),複製一份元素。 |
發表人: | Merci chao [ 2007-03-15, 18:14 ] |
文章主題 : | |
legnaleurc 寫: 不是吧.... 這個....我當然是有試過才問的....= ="你那個動作只是在A的父節點底下新增一個名為A的html element 所以會變成有兩個一模一樣的元素 應該是先用removeChild()再用insertBefore() 吧? 更何況 appendChild 的用法我可是很清楚的喔 ![]() DOM:element.appendChild 引言回覆: If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it some other node).
This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position. 所以先用 removeChild 再用 appendChild 是多餘的 ![]() |
發表人: | Merci chao [ 2007-03-15, 18:22 ] |
文章主題 : | |
不相信的話可以用 Firefox 來試試 userChrome.js: 代碼: document.getElementById("reload-button").addEventListener("click", function() {
this.parentNode.insertBefore(this.cloneNode(true), this.nextSibling); //複製一個重新載入到自己的右邊 this.nextSibling.id="home-button"; //顯示成首頁, 以作分辨 }, false); document.getElementById("stop-button").addEventListener("click", function() { var button=document.getElementById("reload-button"); //找重新載入 button.parentNode.removeChild(button); //先移除 this.parentNode.appendChild(button); //放到 parentNode 的最後面 }, false); |
發表人: | Amauds [ 2007-03-15, 20:47 ] |
文章主題 : | |
Merci chao 寫: 首先, 有這樣的兩個按鈕:
代碼: <hbox> <button id="a" label="按鈕A"/> <button id="b" label="按鈕B"/> </hbox> 然後用這個 function 為它們加入 click 事件: 代碼: add: function() { document.getElementById("a").addEventListener("click", function() { this.setAttribute("label", this.getAttribute("label") + "1"); }, false); document.getElementById("b").addEventListener("click", function() { var button = document.getElementById("a"); button.parentNode.appendChild(button); }, false); } 再試試按一下 A, 它的 label 能成功地不停加入 1 字 最後按一下 B, A 也能成功地放到 B 後面 但再按 A 的時候, 它的 click 事件就失效了 Shocked 請問大家, 應該如何解決這個問題呢 Question 感謝 Smile legnaleurc 寫: 不是吧.... 這個....我當然是有試過才問的....= ="你那個動作只是在A的父節點底下新增一個名為A的html element 所以會變成有兩個一模一樣的元素 應該是先用removeChild()再用insertBefore() 吧? 更何況 appendChild 的用法我可是很清楚的喔 ![]() DOM:element.appendChild 引言回覆: If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it some other node). This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position. 所以先用 removeChild 再用 appendChild 是多餘的 ![]() 如你所述, 它不該發生問題. 那你為什麼發問? |
發表人: | Merci chao [ 2007-03-15, 21:00 ] |
文章主題 : | |
Amauds 寫: 如你所述, 它不該發生問題. 那你為什麼發問? Oh, my God... 還在研究 appendChild 嗎... = ="
appendChild 當然沒問題... 我的問題是: 用了 appendChild, insertBefore 或者 replaceChild 之後, 用 addEventListener 新增的 event 似乎會失蹤 而我以上列出的所有 code 都能顯示出這現像 所以想請教大家, 應該如何解決這問題? 為何總是被人看成是專問低能問題的呢.... ![]() |
發表人: | kourge [ 2007-03-16, 13:17 ] |
文章主題 : | |
Merci chao 寫: Amauds 寫: 如你所述, 它不該發生問題. 那你為什麼發問? Oh, my God... 還在研究 appendChild 嗎... = ="appendChild 當然沒問題... 我的問題是: 用了 appendChild, insertBefore 或者 replaceChild 之後, 用 addEventListener 新增的 event 似乎會失蹤 而我以上列出的所有 code 都能顯示出這現像 所以想請教大家, 應該如何解決這問題? 為何總是被人看成是專問低能問題的呢.... ![]() 喔喔,失蹤應該是正常的,所以要重新 addEventListener 一次。 .cloneNode(true) 試試看「或許」可以。 |
發表人: | Merci chao [ 2007-03-16, 22:09 ] |
文章主題 : | |
kourge 寫: 喔喔,失蹤應該是正常的,所以要重新 addEventListener 一次。 喔, 謝謝你的答案 .cloneNode(true) 試試看「或許」可以。 ![]() 不過.... 不知道大家還有沒有其他的方法呢 ![]() |
發表人: | kourge [ 2007-03-18, 00:49 ] |
文章主題 : | |
Merci chao 寫: kourge 寫: 喔喔,失蹤應該是正常的,所以要重新 addEventListener 一次。 喔, 謝謝你的答案 .cloneNode(true) 試試看「或許」可以。 ![]() 不過.... 不知道大家還有沒有其他的方法呢 ![]() .cloneNode 提醒: .cloneNode(true) 會 deep clone,子元素會一起複製 .cloneNode(false) 只會複製該元素,子元素不會一起複製。 |
發表人: | Merci chao [ 2007-03-18, 08:10 ] |
文章主題 : | |
kourge 寫: .cloneNode 提醒 但是 cloneNode 不會把 event 也一併複製的喔.... ![]() 就像前面 reload-button 和 stop-button 的例子一樣 按下新增了 event 的 reload-button 之後, 會製造一個 cloneNode 出來 不論 cloneNode 有沒有被更改 id, 按下這個複製品之後不會再進行複製 這證明 cloneNode 只複製 element 而不複製 event 我明白可以再次用 addEventListener 新增回來, 但如果 removeChild 這類動作不是我做的, 那我就需要別的 code 去監視這類動作了... Gecko 好像做得不夠完善的樣子... |
發表人: | Merci chao [ 2007-04-30, 20:52 ] |
文章主題 : | |
剛才發現, 這個問題在 3.0a5 中解決了, 請各位套件開發者注意 ![]() |
發表人: | kourge [ 2007-05-02, 14:11 ] |
文章主題 : | |
Merci chao 寫: 剛才發現, 這個問題在 3.0a5 中解決了, 請各位套件開發者注意
![]() 喔,好棒! 對了,Gecko 1.9 會開始要求 developer 使用 importNode() 或 adaptNode() 喔。 |
第 1 頁 (共 2 頁) | 所有顯示的時間為 UTC + 8 小時 |
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |