Question

我有一个选择框，用于导航到“更改”事件的新页面并记录一些分析。我希望触发两个事件处理程序，以便两个处理程序触发“更改”而不是仅仅分配给onchange的最后一个函数。我只需要知道我需要在函数（）中添加//占位符文本，以便在“更改”事件中触发这两个事件。我希望答案是简单的JavaScript而不是jQuery。谢谢:)这是代码：

的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>

Answer 1

您可以通过以下方式完成此任务：

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

或者

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

在这种情况下，

addEventListener 负责将“更改”事件侦听器分配到nav选择元素。一旦检测到事件，您就可以调用其他功能。

Answer 2

为什么你没有这样的东西？

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
}

Answer 3

您可以在当前答案中使用该方法，也可以使用以下方法之一。按当前代码分配给属性：

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

创建一个按顺序调用函数的侦听器。如果您要求函数中的 this 成为放置侦听器的元素，那么：

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);
};

为同一事件创建两个侦听器，并按预期设置 this 。但是，无法保证监听器的执行顺序。

请注意，在导航选择选项时，在某些浏览器（例如IE）中，每次使用键导航到下一个选项时都会触发更改事件。如果更改事件触发导航，则用户将无法通过第一个选项。

Answer 4

Treehouse Challenge在第14行和第15行寻找的代码是：

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

在“change”事件上触发了多个addEventListeners

4 个答案: