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

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(匿名函数调用带参数的命名函数):

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: " + addClass);
}

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

解决方案 #2(命名函数调用带参数的命名函数):

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);
}

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