Question

嗨，所以我创建了这个效果很好的代码。

document.getElementById("file").addEventListener('click', 


function () {

var textArea = document.getElementById("newTextArea");

//Retrieve the selected text :
var selText = window.getSelection();
var text = textArea.innerHTML;
// I need to make a condition here.  If the text doesn't have a span tag then do this: 
if (document.querySelector('.test') === null) {
    textArea.innerHTML = text.replace(selText, '<span class="test">'+selText+'</span>');
// if the text does have a span tag then remove the span tag
} else if (document.querySelector('.test') !== null) {
    var deSelText = document.querySelector('.test');
    var highlightedText = deSelText.innerHTML;
    var parent = deSelText.parentNode;
    var newNode = document.createTextNode(highlightedText);
    parent.insertBefore(newNode, deSelText);
    parent.removeChild(deSelText);
  }
}, false);

但是我想将匿名函数变成一个命名函数，所以它看起来像这样：

document.getElementById("file").addEventListener('click', classAndSpan(test), false);

这是命名函数：

function classAndSpan(addClass) {

var textArea = document.getElementById("newTextArea");

//Retrieve the selected text :
var selText = window.getSelection();
var text = textArea.innerHTML;
// I need to make a condition here.  If the text doesn't have a span tag then do this: 
if (document.querySelector('.' + addClass) === null) {
    textArea.innerHTML = text.replace(selText, '<span class="' + addClass + '">'+selText+'</span>');
  // if the text does have a span tag then remove the span tag
} else if (document.querySelector('.' + addClass) !== null) {
    var deSelText = document.querySelector('.' + addClass);
    var highlightedText = deSelText.innerHTML;
    var parent = deSelText.parentNode;
    var newNode = document.createTextNode(highlightedText);
    parent.insertBefore(newNode, deSelText);
    parent.removeChild(deSelText);
  }
}

我错过了一些东西，因为这个命名功能不起作用。我是否在函数中返回了一些东西，如果是，我该返回什么？

感谢您的帮助，非常感谢。

Answer 1

为了引用一个函数（这是你用回调做的），你只需说出函数的名称：

foo

为了调用一个函数，你可以使用括号：

foo();

所以，当你写：

document.getElementById("file").addEventListener('click', classAndSpan(test), false);

您实际上是立即调用 classAndSpan（甚至在调用addEventListener()方法调用之前），而不是引用 classAndSpan

浏览器会自动调用事件处理函数（回调函数），因此您无法为它们提供参数。但是，如果要在事件发生时将参数传递给回调函数，则可以通过将命名函数包装在匿名函数或其他命名函数中来实现此目的。然后，当事件发生时，将调用匿名函数（没有任何参数），它将执行函数调用（具有参数）。

解决方案＃1（匿名函数调用带参数的命名函数）：

＆＃13;

document.getElementById("file").addEventListener('click', function(){
  // Because you want to pass arguments, you need to wrap this call inside of another fucntion
  classAndSpan(test);
}, false);

var test = "SOME VALUE";

function classAndSpan(addClass) {
  console.log("You called classAndSpan with a value of: " + test);
}

＆＃13;

<input type="button" id="file" value="Click Me">

＆＃13;

解决方案＃2（命名函数调用带参数的命名函数）：

＆＃13;

document.getElementById("file").addEventListener('click', wrapper, false);

var test = "SOME VALUE";

function wrapper(){
  // Because you want to pass arguments, you need to wrap this call inside of another fucntion
  classAndSpan(test); 
}


function classAndSpan(addClass) {
  console.log("You called classAndSpan and passed: " + addClass);
}

＆＃13;

<input type="button" id="file" value="Click Me">

＆＃13;

Answer 2

在将其添加为事件处理程序的回调时，无需调用该函数。相反，您需要通过函数名称引用函数声明。

因此，您需要在事件处理程序中将classAndSpan(test)替换为classAndSpan。

document.getElementById("file").addEventListener('click', classAndSpan, false);

另请注意，回调函数将从事件接收参数。因此，如果您将event.Target.yourPropertyName添加到事件Target，则可以访问yourPropertyName之类的参数。

Answer 3

您要做的是将功能classAndSpan传递给addEventListener。目前，您没有传递函数，而是立即调用函数并将返回的内容传递给addEventListener。

更改为：

document.getElementById("file").addEventListener('click', classAndSpan, false);

如何在javascript中用命名函数替换匿名函数？

3 个答案: