如何在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到事件目標。

Answer 3

你想要做的是將函數classAndSpan傳遞給addEventListener 。 目前，您沒有傳遞函數，而是立即調用函數並將其返回的內容傳遞給addEventListener 。

改為：

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