Как заменить анонимную функцию именованной функцией в 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">

Answer 2

Вам не нужно вызывать функцию, пока вы добавляете ее в качестве обратного вызова для обработчика событий. Вместо этого вам нужно просто ссылаться на объявление функции по имени функции.

Поэтому вам необходимо заменить classAndSpan(test) на classAndSpan в обработчике событий.

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

отметить также, что функция обратного вызова получит аргументы от Event. Таким образом, вы можете получить доступ к таким аргументам, как event.Target.yourPropertyName, при условии, что вы добавите yourPropertyName к событию Target.

Answer 3

Что вы хотите сделать, это передать функцию classAndSpan на номер addEventListener. В настоящее время вы не передаете функцию, а скорее вызываете функцию немедленно и передаете , что она возвращает в addEventListener.

Изменить это:

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