在「更改」事件上觸發多個addEventListeners

-1

我有一個選擇框用於導航到「更改」事件的新頁面並記錄一些分析。我想要觸發兩個事件處理程序，以便兩個處理程序都觸發「更改」而不是僅分配給onchange的最後一個功能。我只需要知道我需要使用//佔位符文本放入函數（），以便在「更改」事件中觸發這兩個事件。我想要的答案是簡單的ole JavaScript而不是jQuery。謝謝:)下面的代碼：在「更改」事件上觸發多個addEventListeners

的Javascript

樹挑戰：「我們已經得到了這是我們用來導航到一個新的頁面上的一個選擇框‘改變’事件，並記錄了一些分析，我們想要的。兩個事件處理程序觸發，修復第14行和第15行，以便兩個處理程序觸發「更改」而不是僅分配給onchange的最後一個功能。「

//Select select box 
var navigationSelect = document.getElementById("nav"); 

//Navigate to URL when select box is changed 
var navigateToValue = function() { 
    window.location = this.value; 
} 

//Send analytics data 
var sendAnalytics = function() { 
    //Placeholder 
} 

navigationSelect.onchange = navigateToValue; 
navigationSelect.onchange = sendAnalytics;

HTML

<!DOCTYPE html> 
<html> 

    <body> 
     <select id="nav"> 
      <option value="index.html">Home</option> 
      <option value="about.html">About</option> 
     </select> 

     <h1>About</h1> 

     <script src="app.js"></script> 

    </body> 

</html>

來源

2014-09-02 Jason Keith McCoy

傑森嗨，你能告訴我們你已經試圖把在'sendAnalytics'功能，爲什麼那不起作用？ – Roberto 2014-09-02 23:00:46

我不認爲你應該填寫佔位符。挑戰說只是修復14和15行。 – guest 2014-09-02 23:31:43

是的:)你是100％正確的。一旦我離開佔位符代碼，它就可以工作了。大聲笑 – 2014-09-02 23:39:56

您可以通過完成此任務：在這種情況下

document.getElementById('nav').addEventListener('change', function(){ 
    sendAnalytics(); 
    navigateToValue(); 
}

或者

navigationSelect.addEventListener('change', sendAnalytics, false); 
navigationSelect.addEventListener('change', navigateTo, false);

的addEventListener負責屁股在您的導航選擇元素上點擊「更改」事件監聽器。一旦檢測到事件，您可以調用您的附加功能。

來源

2014-09-02 23:08:36 Brian

感謝您的答覆。我無法讓它工作。我需要知道sendAnalytics函數中的內容 – 2014-09-02 23:13:44

您可以詳細說明您打算將哪些內容放入sendAnalytics函數中嗎？你有什麼嘗試？ – Brian 2014-09-02 23:14:49

這是我試過的： var navigationSelect = document.getElementById（「nav」）; //當選擇框更改時導航到URL var navigateToValue = function（）{ window.location = this.value; } //發送分析數據 var sendAnalytics = function（）{ navigationSelect.onchange = navigateToValue; navigationSelect.onchange = sendAnalytics; } – 2014-09-02 23:16:16

爲什麼你沒有這樣的事情？

document.getElementById('nav').addEventListener('change', function(){ 
    navigateToValue(); 

} 

function navigateToValue(){ 
    window.location = this.value(); 

//you know the data going into sendAnalytics at this point 

    sendAnalystics(); 
} 

function sendAnalytics(){ 
    //your function body 
}

來源

2014-09-02 23:15:32

好吧，懺悔時間：這段代碼片段是針對Team Treehouse上的代碼挑戰，它是關於純粹JavaScript的。以下是挑戰：「我們有一個選擇框用於導航到」更改「事件的新頁面並記錄一些分析，我們希望兩個事件處理程序觸發，修復第14行和第15行，的處理程序觸發「更改」而不是僅分配給onchange的最後一個功能。「我編輯了上面的代碼，以顯示挑戰所說的內容以及他們給我的代碼。 – 2014-09-02 23:30:32

那麼在這種情況下，我會有這樣的事情。我不確定這是否正確。 '$ .when（navigateToValue（））。done（sendAnalystics（））' – 2014-09-02 23:35:09

我敢肯定，這將工作，但它不能是jQuery，必須是純粹的香草JavaScript。 – 2014-09-02 23:37:42

您可以在當前答案中使用該方法，或使用以下方法之一。根據當前代碼分配給屬性：

var sendAnalytics = function() { 
    navigationSelect.onchange = function() { 
     sendAnalytics(); 
     navigateToValue(); 
    } 
};

它創建一個按順序調用函數的單個偵聽器。如果您需要這個職權範圍的是在其上監聽器被放置元素，那麼：你應該先發分析，因爲一旦你開始導航，腳本執行立刻和停止

var sendAnalytics = function() { navigationSelect.onchange = function() { sendAnalytics.call(navigationSelect); navigateToValue.call(navigationSelect); } };

注sendAnalytics可能不會被調用。

多次調用addEventListener：

var sendAnalytics = function() { 
    navigationSelect.addEventListener('change', sendAnalytics, false); 
    navigationSelect.addEventListener('change', navigateToValue, false); 
};

它創建兩個偵聽器相同的事件，並設置這個預期。但是，聽衆的執行順序不能保證。

請注意，在瀏覽選擇選項時，某些瀏覽器（例如IE）會在每次使用密鑰導航到下一個選項時觸發更改事件。如果更改事件觸發器導航，用戶將不會超過第一個選項。

來源

2014-09-02 23:25:58 RobG

謝謝。看起來真棒。然而...樹屋是一種挑剔，沒有任何這些選項的工作。我得到的錯誤「糟糕！你沒有添加任何''change''事件處理程序與'addEventListener（） '方法。「 – 2014-09-02 23:33:26

嘗試只是將第14行和第15行更改爲我的答案中的第二個方法，這與最後一個方法的主體相同@RobG提供的 – Brian 2014-09-02 23:39:22

那麼，爲什麼Treehouse無法正確分析代碼**我們的**問題？;-)正如您從答案的範圍中可以看到的，有很多方法可以解決這個問題，並且它不一定需要使用* addEventLi斯特納*。 – RobG 2014-09-03 04:16:27

，該樹的挑戰是尋找上線14和15的代碼是：

navigationSelect.addEventListener ("change", navigateToValue); 
navigationSelect.addEventListener ("change", sendAnalytics);

來源

2014-09-13 15:51:35

在「更改」事件上觸發多個addEventListeners

回答

相關問題