Question

＆＃13;

var fn = (function() {

  return {
    'init': function(className) {
      // Access <a> tag here and apply className
    }
  };

}());

＆＃13;

<a href="#" onmouseover="fn.init('myClass')">Link</a>

＆＃13;

在上面的代码段中，是否可以将this隐式传递给fn.init？

我意识到我可以将fn.init的声明更改为function(className, el)并使用onmouseover="fn.init('myClass', this)"来访问该元素，但我很好奇是否有可能不通过{{1在内联事件监听器中。

Answer 1

没有。每次调用函数时，都会得到this的新值。

fn.init('myClass')是对theElement.onmouseover(event)的不同函数调用。

您可以使用addEventListener来绑定事件处理程序，而不是使用内部事件属性。

Answer 2

你也可以使用call（我知道你说你不想在内联事件监听器中传递this，但这可能是唯一的方法）。唯一的另一种方法是使用addEventListener而不使用内联事件。

＆＃13;

var fn = (function() {

  return {
    'init': function(className) {
      // Notice that I can use "this" in this function
      // Which refers to the <a> element
      this.className = className;
    }
  };

}());

＆＃13;

.myClass {
  color: red;
}

＆＃13;

<a href="#" onmouseover="fn.init.call(this, 'myClass')">Link</a>

＆＃13;

如果您想为每个<a>元素添加一个事件，您可以这样做：

var elems = document.getElementsByTagName("a");
for (var i = 0; i < elems.length; ++i) {
  elems[i].addEventListener("click", function() {
    fn.init.call(this, 'myClass');
  }, false);
}

或者如果您只使用现代浏览器（没有IE）

var elems = document.getElementsByTagName("a");
for (var i = 0; i < elems.length; ++i) {
  elems[i].addEventListener("click", fn.init.bind(elems[i], 'myClass'), false);
}

通过内联事件侦听器隐式传递“this”

2 个答案: