如何在AddEventListener的函数中添加参数

Question

我正在尝试创建一个包含一些图层的Web制图应用程序，其想法是我有一些复选框，当我单击它们时，该图层被添加或删除（我已经做过了），但是其中包含很多图层，当然很多代码，我意识到使用函数可以完成工作，但是经过数小时的工作后，它仍然无法正常工作，我准备放弃：

function turnon(idlayer, layer) {
  var local = document.getElementById(layer);//verify whick checkbox is the one for the layer
  if (local.checked == true) {
    map.addOverlay(layer);//an OpenLayers method to add the layer to the map
  } else {
    map.removeOverlay(layer);
  }
}
var wmsSector=document.getElementById('sector')//This is the checkbox
wmsSector.addEventListener("click", turnon);

我不知道如何在addEventListener处理程序上添加参数的事情我已经尝试过：

wmsSector.addEventListener("click",turnon('wmsSector',sector))

我感谢您能提供的任何帮助，因为目前该应用程序可以运行，但我认为它可以更优雅。

Answer 1

我将在附加侦听器时更加通用，以便复选框提供要附加的叠加层的ID或名称，例如

 // For testing var map = { addOverlay: function(layer) { console.log(layer + ' added'); }, removeOverlay: function(layer) { console.log(layer + ' removed'); } }; // Toggle layer on or off function toggleLayer(evt) { this.checked? map.addOverlay(this.value) : map.removeOverlay(this.value); } // Add listener to each layer checkbox window.onload = function() { [].forEach.call(document.querySelectorAll('.layerToggle'), function(node) { node.addEventListener('click', toggleLayer, false); }); } 

 <label for="wmsSector"><input type="checkbox" id="wmsSector" value="wmsSector" class="layerToggle">&nbsp;WMS Sector</label><br> <label for="vegetation"><input type="checkbox" id="vegetation" value="vegetation" class="layerToggle">&nbsp;Vegetation</label><br> <label for="adminBoundaries"><input type="checkbox" id="adminBoundaries" value="adminBoundaries" class="layerToggle">&nbsp;Admin Boundaries</label> 

我使用过value属性，但您也可以使用data- *属性，例如data-mapLayer="wmsSector"或类似属性。

Answer 2

使用匿名功能，

wmsSector.addEventListener("click",function(){
    turnon('wmsSector',sector);
})