javascript - 事件监听器设置在错误的元素上

Question

我想知道为什么这个 javascript 不起作用:

var element = document.querySelector('#element1');
var button= document.querySelector('#button1');
button.addEventListener('click', function() {
    element.doSomething();
});

var element = document.querySelector('#element2');
var button= document.querySelector('#button2');
button.addEventListener('click', function() {
    element.doSomething();
});

两个按钮都对“element2”执行某些操作。

事件监听器是否保留指向变量而不是其值的指针？

感谢您的回答

Answer 1

你可以用匿名来包装你的 block 级代码；自执行函数。

这类似于在 Java 中用大括号包裹 {/* {{code}} */} 代码块。您可以有重复的变量，只要它们存在于自己的 block 中即可。

这样，变量就可以是相同的。您确实应该创建一个单独的函数并传入选择器 ID；尤其是当他们做同样的事情时。

(function() {
  HTMLDivElement.prototype.doSomething = function () { 
    this.innerHTML = this.innerHTML == 'Hello' ? 'Goodbye' : 'Hello';
  }
}());

(function() {
  var element = document.querySelector('#element1');
  var button = document.querySelector('#button1');
  button.addEventListener('click', function() {
    element.doSomething();
  });
}());

(function() {
  var element = document.querySelector('#element2');
  var button = document.querySelector('#button2');
  button.addEventListener('click', function() {
    element.doSomething();
  });
}());

div {
  display: inline-block;
  width: 5em;
  height: 2em;
  border: thin solid black;
  text-align: center;
  line-height: 2em;
  margin-bottom: 0.25em;
}

<div id="element1">?</div>
<input type="button" id="button1" value="Button 1" />
<br />
<div id="element2">?</div>
<input type="button" id="button2" value="Button 2" />

你应该试试这个。

function addButtonClick(btnSelectorId, elSelectorId) {
  document.querySelector(btnSelectorId).addEventListener('click', function() {
    document.querySelector(elSelectorId).doSomething();
  });
}

addButtonClick('#button1', '#element1');
addButtonClick('#button2', '#element2');