在函數中使用addEventListener方法

Question

我有一張九張照片的表格，我也有九套：一張照片;一個文本;和一個音頻控制，它們隱藏在屏幕的左側。我試圖做到這一點，當點擊表格中的照片時，相應的設置從隱藏位置移動到網頁的可見區域。
我問了這個問題，並得到了有關如何使用onclick方法做到這一點的有用答案，但由於我有9個，因爲我已經閱讀了addeventlistener結果更乾淨的代碼，更經濟，我一直試圖這樣做，但沒有運氣。請看我的代碼並告訴我我錯過了什麼，請提前感謝您的幫助。忽略onclick，因爲一旦我得到addeventlistener的工作，我會替換它。附：我正在努力掌握JavaScript。

HTML代碼（我沒有包括對圖像，文字代碼，音頻，因爲我知道他們都很好，因爲他們用的onclick功能工作：

... 
<table> 
    <tbody> 
     <tr> 
     <td><img onclick="sleepFunction(this)" src="01.jpg" height="180" width="120"></td> 
     <td><img id = "02" src="02.jpg" height="180" width="120"/></td> 
     <td><img id = "03" src="03.jpg" height="180" width="290"/></td> 
     </tr> 
     <tr> 
     <td><img id = "04" src="04.jpg" height="180" width="120"/></td> 
     <td><img id = "05" src="05.jpg" height="180" width="120"/></td> 
     <td><img id = "06" src="06.jpg" height="180" width="290"/></td> 
     </tr> 
     <tr> 
     <td><img id = "07" src="07.jpg" height="180" width="120"/></td> 
     <td><img id = "08" src="08.jpg" height="180" width="120"/></td> 
     <td><img id = "09" src="09.jpg" height="180" width="290"/></td> 
     </tr> 
    </tbody> 
</table>  
... 

這裏是JavaScript：

function slideShow (text, image, song) { 
    this.text = text; 
    this.image = image; 
    this.song = song; 
    this.xbutton = xbutton; 
    this.moveLeft = function(){ 
    this.text.style.left = "357px"; 
    this.image.style.left = "851px"; 
    this.song.style.left = "450px"; 
    this.song.play(); 
    this.xbutton.style.left = "357px"; 
    } 
    } 

var sleep = new slideShow(document.getElementById("sleepText"),document.getElementById("sleepImage"), document.getElementById("sleepSong"), getElementById("xbutton")); 

var sleepLeft = sleep.moveLeft(); 

document.getElementById("02").addEventListener("click", moveLeft); 

Answer 1

看起來，你是關閉moveLeft功能是在SlideShow實例（你應該利用這第一個字母），所以你需要你的聽衆改爲：

document.getElementById("02").addEventListener("click", sleep.moveLeft); 

隨着資本對象：

function SlideShow (text, image, song) { 
    this.text = text; 
    this.image = image; 
    this.song = song; 
    this.xbutton = xbutton; 
    this.moveLeft = function(){ 
    this.text.style.left = "357px"; 
    this.image.style.left = "851px"; 
    this.song.style.left = "450px"; 
    this.song.play(); 
    this.xbutton.style.left = "357px"; 
    } 
    } 

var sleep = new SlideShow(document.getElementById("sleepText"),document.getElementById("sleepImage"), document.getElementById("sleepSong"), getElementById("xbutton")); 

var sleepLeft = sleep.moveLeft(); 

document.getElementById("02").addEventListener("click", sleep.moveLeft);