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

【问题标题】：How to add parameters in a function on a AddEventListener如何在 AddEventListener 的函数中添加参数
【发布时间】：2017-06-29 23:29:57
【问题描述】：

我正在尝试创建一个带有一些图层的 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 Handler 上添加参数我试过这个：

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

感谢您给我的任何帮助，因为现在该应用程序可以运行，但我相信它可以更优雅。

【问题讨论】：

用.bind绑定参数或传递一个函数表达式，包裹函数并用参数调用它

标签： javascript function addeventlistener dom-events

【解决方案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" 或类似的。

【讨论】：

【解决方案2】：

使用匿名函数，

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

【讨论】：