在“;改变“;事件

Multiple addEventListeners triggered on the "change" event

本文关键字：事件 改变      更新时间：2023-09-26

我有一个选择框，用于导航到"更改"事件的新页面并记录一些分析。我希望触发两个事件处理程序，以便两个处理程序都在"更改"时触发，而不仅仅是分配给onchange的最后一个函数。我只需要知道我需要在带有//占位符文本的function（）中放入什么，以便在"更改"事件上触发这两个事件。我希望答案是简单的ole 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>

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

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
}

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

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）中，当导航选定的选项时，每次使用键导航到下一个选项时，都会触发一个更改事件。如果更改事件触发导航，则用户将无法通过第一个选项。

您可以通过：

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

或

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

addEventListener在这种情况下负责将"更改"事件侦听器分配到您的nav select元素。一旦检测到该事件，您将调用其他函数。

树屋挑战在第14行和第15行寻找的代码是：

navigationSelect.addEventListener ("change", navigateToValue);
navigationSelect.addEventListener ("change", sendAnalytics);
相关文章：