Question

我有一些div标签，我想制作一个JavaScript函数来改变调用函数的div的背景颜色

function red()
{
this.style.background="red"; // the "this" keyword doesn't refer to the calling object
}

我有很多像这样的div标签

<div id="one" onclick="red()"></div>
<div id="two" onclick="red()"></div>
<div id="three" onclick="red()"></div>

有没有办法实现它，或者我应该为每个div添加一个函数，如此

function somename()
{
document.getElementById(id of the div that calls the function).style.background="red";
}

我不想放很多功能因为我有太多的div标签

Answer 1

您需要为函数context设置正确的red()。您可以使用Function.prototype.call或Function.prototype.apply来完成此操作。像

<div id="one" onclick="red.call(this)"></div>

示例：http://jsfiddle.net/dFLCD/

Answer 2

你只需要传递调用它的元素

<div id="one" onclick="red(this)"></div>

function red(element){
    element.style.background="red";
    var id = element.id;
}

Answer 3

你可以在函数中传递对象，如

<div id="one" onclick="red(this)"></div>

 function red(element)
{
    element.style.background="red";
}

Answer 4

如果动态附加侦听器，则将使用目标元素调用该函数 this ：

<script>

function showId() {
  alert(this.id);
}

window.onload = function() {
  document.getElementById('foo').onclick = showId;
}

</script>

<div id="foo">foo</div>

你也可以使用 addEventListener ，让它与 attachEvent 一起工作还有一些工作，但不多：

function showId() {
  alert(this.id);
}

function addListener(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on'+evt, function() {
      fn.call(el);
    });
  }
}

window.onload = function() {
  addListener(document.getElementById('foo'), 'click', showId);
}

addListener 函数有很多版本，上面的内容很简单。

Answer 5

将事件处理程序定义为HTML属性时：

<div id="one" onclick="red()"></div>

您实际上有一个匿名函数来执行属性中的代码。它基本上等同于：

element.onclick = function(event) {
    red();
}

您可以清理HTML并与JS更好地分离，HTML直接在JS代码中定义处理程序。类似的东西：

document.getElementById("one").onclick = red;

在这种情况下，this将是触发事件的元素。请注意，在支持标准的浏览器中，最好使用addEventListener。对于记录，在jQuery中你会有类似的东西：

$("#one").click(red);

引用调用对象

5 个答案: