javascript - javascript onclick 事件的范围为 'this'

Question

我正在尝试使用 this 来访问 JavaScript onclick 事件的函数。目前我只能使用 this 返回 dom 节点。是否可以将范围扩展到这个dom节点之外？我想调用函数toggleLayer。使用dojo 1.7+

toggleLayer: function(){
  console.log('toggled layer!!!');
},

_init: function() {
  this.domNode.innerHTML = 'Click <a href="#"onclick="this.toggleLayer()">Here</a> to toggle layer';
}

编辑 - 这是我从昆汀斯的回答中提出的解决方案:

toggleLayer: function() {
  console.log('toggled layer!!!');
},

_init: function() {
  this.domNode.innerHTML = ''; // Erase existing content
  this.domNode.appendChild(document.createTextNode('Click '));
  var link = document.createElement('a'); 
  link.appendChild(document.createTextNode('Here'));
  link.href = "#";
  link.addEventListener('click', this.toggleLayer.bind(this));
  this.domNode.appendChild(link);
  this.domNode.appendChild(document.createTextNode(' to toggle layer'));

}

Answer 1

在这种情况下不是。您通过创建字符串然后转换它来生成 DOM。您从字符串创建的函数将与您所在的范围完全没有联系。

改用正确的 DOM。

this.domNode.innerHTML = ""; // Erase existing content
this.domNode.appendChild(document.createTextNode("Click "));
var button = document.createElement("button"); // Don't use links to the top fo the page for this
button.appendChild(document.createTextNode("Here"));
button.addEventListener("click", this.toggleLayer.bind(this));
this.domNode.appendChild(button);
this.domNode.appendChild(document.createTextNode(" to toggle layer"));