事件监听器导致Javascript函数错误

Javascript Function Error From Event Listeners

本文关键字：函数 错误 Javascript 监听器 事件      更新时间：2023-09-26
function start(){
    var onChangeHandler = function() {
       calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
document.getElementById('pac-input').addEventListener('change',onChangeHandler);
document.getElementById('pac-input2').addEventListener('change', onChangeHandler);
}

每次我改变第一个元素，我得到一个错误，因为我应该传递两个参数到'onChangeHandler'。是否有任何方法可以阻止我的代码产生此错误?一旦我改变了第二个元素，我的代码工作得很好，因为我将传递两个参数到'onChangeHandler'。

function start(){
    var onChangeHandler = function() {
       calculateAndDisplayRoute(directionsService = '', directionsDisplay = '');
    };
    document.getElementById('pac-input').addEventListener('change',onChangeHandler);
    document.getElementById('pac-input2').addEventListener('change', onChangeHandler);
}

根据需要设置参数的默认值。

onChangeHandler只接收来自浏览器的单个event。要向它传递更多的东西，可以将它嵌套到一个匿名函数中:

function start(){
    var onChangeHandler = function() {
       calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
   document.getElementById('pac-input').addEventListener('change',function(e){
        // I do not know what things you want to pass, but it makes no difference for the purposes of this example
        onChangeHandler(e, {});
   }, false);
   document.getElementById('pac-input2').addEventListener('change', function(e){
        onChangeHandler(e, {});
   });
}

你为什么要嵌套onChangeHandler ?为什么不直接调用里面的函数呢?它看起来是这样的，并且会去掉中间的人:

   document.getElementById('pac-input2').addEventListener('change', function(e){
        calculateAndDisplayRoute(e, {});
   });
相关文章：