Fatal编程技术网
  • javascript/
  • Javascript 价值'；这'；当函数以不同方式调用时

Javascript 价值'；这'；当函数以不同方式调用时

javascript

Javascript 价值'；这'；当函数以不同方式调用时,javascript,Javascript,在本页上： 警告：当使用addEventListener（）调用modifyText（）函数时，this的值将不同于直接在HTML中使用onclick='应用事件。在上面链接的页面中，注意第一个示例（实际上是第二个），然后注意下面标题为“处理程序中this的值”的部分 我决定对此进行测试，但没有发现差异。我做错了什么 addeventlistener2.html： <html> <head> <title>DOM Event Example 1</tit

在本页上：

警告：当使用
addEventListener（）
调用
modifyText（）
函数时，
this
的值将不同于直接在HTML中使用
onclick='
应用事件。在上面链接的页面中，注意第一个示例（实际上是第二个），然后注意下面标题为“处理程序中
this
的值”的部分

我决定对此进行测试，但没有发现差异。我做错了什么

addeventlistener2.html：

<html>
<head>
<title>DOM Event Example 1</title>
<style type="text/css">
  #t { border: 1px solid red }
  #t1 { background-color: pink; }
</style>
<script type="text/javascript">

  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.innerHTML = new_text + '<br />this: <b>' + this + '</b>';
  }

  // Function to add event listener to t
  function load() {
    var el = document.getElementById("t");
    el.addEventListener("click", function(){modifyText("body onload")}, false);
  }

</script>
</head>
<body onload="load();">

<p>has onload in body.</p>

<table id="t">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

</body>
</html>

<html>
<head>
<title>DOM Event Example 2</title>
<style type="text/css">
  #t { border: 1px solid red }
  #t1 { background-color: pink; }
</style>
<script type="text/javascript">

  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.innerHTML = new_text + '<br />this: <b>' + this + '</b>';
  }

</script>
</head>
<body>

<p>has onclick in table:</p>

<table id="t" onclick='modifyText("boo!")'>
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

</body>
</html>


DOM事件示例1
#t{边框：1px实心红色}
#t1{背景色：粉红色；}
//函数更改t2的内容
函数修改文本（新文本）{
var t2=document.getElementById（“t2”）；
t2.innerHTML=new_text+'
this:'+this+''；
}
//函数将事件侦听器添加到t
函数加载（）{
var el=document.getElementById（“t”）；
el.addEventListener（“单击”，函数（）{modifyText（“body onload”）}，false）；
}
体内有超负荷

一
二
addeventlistener2.html：

<html>
<head>
<title>DOM Event Example 1</title>
<style type="text/css">
  #t { border: 1px solid red }
  #t1 { background-color: pink; }
</style>
<script type="text/javascript">

  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.innerHTML = new_text + '<br />this: <b>' + this + '</b>';
  }

  // Function to add event listener to t
  function load() {
    var el = document.getElementById("t");
    el.addEventListener("click", function(){modifyText("body onload")}, false);
  }

</script>
</head>
<body onload="load();">

<p>has onload in body.</p>

<table id="t">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

</body>
</html>

<html>
<head>
<title>DOM Event Example 2</title>
<style type="text/css">
  #t { border: 1px solid red }
  #t1 { background-color: pink; }
</style>
<script type="text/javascript">

  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.innerHTML = new_text + '<br />this: <b>' + this + '</b>';
  }

</script>
</head>
<body>

<p>has onclick in table:</p>

<table id="t" onclick='modifyText("boo!")'>
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

</body>
</html>


DOM事件示例2
#t{边框：1px实心红色}
#t1{背景色：粉红色；}
//函数更改t2的内容
函数修改文本（新文本）{
var t2=document.getElementById（“t2”）；
t2.innerHTML=new_text+'
this:'+this+''；
}
已在表中单击：

一
二
在addEventListener示例中，您正在将modifyText包装到其他函数中。所有的
这个
魔法都会发生在外部函数上，modifyText不会看到任何一个

尝试将modifyText直接传递给addEventListener

node.addEventListener('click', modifyText);
//and make sure to change modifyText to receive no parameters or it wont work :)
如果仍然希望能够选择参数，请使用闭包的威力：

function modifyText(new_text) {
    return function(){
        var t2 = document.getElementById("t2");
        t2.innerHTML = new_text + '<br />this: <b>' + this + '</b>';
    };
}

//addEventListener(modifyText('txt'))
//versus
//onclick=modifyText('txt')()

函数修改文本（新文本）{
返回函数（）{
var t2=document.getElementById（“t2”）；
t2.innerHTML=new_text+'
this:'+this+''；
};
}
//addEventListener（modifyText（'txt'））
//对
//onclick=modifyText（'txt'）（）
嘿，这是指存储函数的对象。 因此，在两个示例中，这都是指全局对象的窗口

测试：

t2.innerHTML=new_text+”
此：“+（此===窗口）+”；
will write true

如果您在任何情况下都从未访问过
此
引用，您如何期望在该引用的值中找到差异？我将
此
放入
t2.innerHTML
。从示例中应该已经很清楚了。您传递一个匿名函数，该函数调用
modifyText
，而在文档中，它们将
modifyText
直接传递给
addEventListener
。没错。它在使用函数引用时工作。但我根本无法让第二个“闭包”示例工作。也没有错误。您是否将注释内容更改为propper版本？我想我输入的闭包位至少是正确的…
这个
是根据调用函数的方式设置的，而不是根据函数“存储”的位置设置的。使用
addEventListener
绑定到事件的函数将
此
设置为触发事件的元素。但其结果相同。。。如果您将其传递给addEventListener，则会将其放在另一个上下文中。是的，ofc依赖于它的调用方式。它在OP的代码中有相同的结果，因为由addEventListener绑定的函数会立即调用另一个函数，并且不会为该函数设置
this
。