Question

这是我的代码：

var myinp = document.querySelector(".myinp");
var store = document.querySelector(".store");

myinp.addEventListener("input", function() {update(store);}, false);

function update(elem) {
  console.log('Executed');
  elem.style.left= this.value + "%";
  if(this.value>0) {
    elem.textContent= this.value;
  } else {
    elem.textContent= null;
  }
}

控制台只显示一个Executed，即便如此，textContent也不会改变。

修改

此版本的代码有效：

myinp.addEventListener("input", update, false);

function update() {
  thumb.style.left= this.value + "%";
  if(this.value>0) {
    thumb.textContent= this.value;
  } else {
    thumb.textContent= null;
  }
}

当我没有传递任何参数时，为什么this引用元素而不是窗口，就像第一种情况一样？。

Answer 1

问题是update函数在全局上下文中执行（window）。如果您希望this成为输入实例，则需要明确提供上下文：

myinp.addEventListener("input", function() {
  update.call(this, store);
}, false);

请记住，执行上下文取决于您调用该函数的方式。在您的情况下，update隐式绑定到全局对象，因此调用它update()将始终this为window。

为什么这个附加的事件监听器没有执行？

1 个答案: