addEventListener関数に変数を渡す

Question

このコードが実行されない理由を理解しようとすると、問題が発生しています。私はコンソールに全く何のエラーもありません。私は、addEventListenerをするパラメータremove(className)を追加すると

const remove = saClass => { 
    document.getElementsByClassName('site-alert')[0].remove(); 
}; 

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => { 
    render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`); 
    document.getElementById('close-message').addEventListener('click', remove(className), false); 
}; 

export const init = (options) => sitealert(options); 

コードがまったく実行されませんし、私は、コンソールにはエラーを取得していません。

パラメータを削除するとすべて正常に動作します。

変数を間違って渡していますか？

私はコードをUMD形式に変換するためにbabelを使用していることに注意してください。

おかげで、 デイブ

Answer 1

functionName(expression) 

のような式は、関数の呼び出しです。あなたが望むのは別の機能です。あなたは明示的にそれを行うことができます。

() => remove(className) 

または.bind()とを：

remove.bind(null, className) 

Answer 2

addEventListenerの第2引数は関数であることが必要です。

removeは関数です。

remove(className)は、引数を指定してその関数を呼び出した結果です。関数にはreturnステートメントがないため、結果はundefinedです。

引数を使用してremoveを呼び出す関数を生成する場合は、bindを使用します。

remove.bind(null, className) 

Answer 3

あなたは、変数に渡すためにクロージャを使用することができ、その後、実際のコールバックを返す：あなたはパラメータを持つfonctionを持っている場合は、あなたが使用する必要があります

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => { 
    render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`); 
    document.getElementById('close-message').addEventListener('click', remove(className), false); 
}; 

function remove(yourVar) { 
    return function (e) { 
     //yourVar is available here 
    } 
} 

Answer 4

を：

.addEventListener('onclick', function() {remove(className)}, true); 

その関数を指定するために