如何在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: " + test);
}

<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">