[JS] eventListener

質問

GMのスクリプトで、ボタンクリックにより、任意の
テキストの非表示を切り替える機能に取り組んでいます。

クリックにより eventListener で関数を呼び出して、そのときの
引数で style.display = "block" と "none" を切り替えたいのですが、
クリックにてイベントがトリガされません。また、後述のとおり
ページロード時に関数が呼ばれてしまって、非表示の状態でロードが完了してしまいます。
======================
＜省略＞
// 表示・非表示ボタン
var addForm = document.createElement('form');

// 表示ボタン
var addInput1 = document.createElement('input');
var addType1 = document.createAttribute('type');
addType1.nodeValue = 'button';
var addValue1 = document.createAttribute('value');
addValue1.nodeValue = 'Display';
var addOnclick1 = document.createAttribute('onclick');
addOnclick1.nodeValue = "hyoji(0)";
addInput1.setAttributeNode(addType1);
addInput1.setAttributeNode(addValue1);
addInput1.setAttributeNode(addOnclick1);

// 非表示ボタン
var addInput2 = document.createElement('input');
var addType2 = document.createAttribute('type');
addType2.nodeValue = 'button';
var addValue2 = document.createAttribute('value');
addValue2.nodeValue = 'UnDisplay';
var addOnclick2 = document.createAttribute('onclick');
addOnclick2.nodeValue = "hyoji(1)";
addInput2.setAttributeNode(addType2);
addInput2.setAttributeNode(addValue2);
addInput2.setAttributeNode(addOnclick2);

// ボタンをフォームに追加
newNode.parentNode.insertBefore(addForm, newNode);
addForm.appendChild(addInput1);
addForm.appendChild(addInput2);

// Display <-> UnDisplay switch
addInput1.addEventListener("click",hyoji(0), false);
addInput2.addEventListener("click",hyoji(1), false);

// 関数部分
function hyoji(num) {
if (num == 0) {
document.getElementById('disp').style.display = "block";
} else {
document.getElementById('disp').style.display = "none";
}
}
======================

<form>
<input type="button" value="Display" onclick="hyoji(0)">
<input type="button" value="UnDisplay" onclick="hyoji(1)">
</form>
<div id="disp" style="display: none;">
<pre>
文字列
</pre>
</div>
=======================
ブレークポイントで動作を追ってみると、ページ読み込み時に
addInput1.addEventListener("click",hyoji(0), false);
から関数に飛び、戻って来て、
addInput2.addEventListener("click",hyoji(1), false);
でまた関数に飛び、
結果的に非表示の状態でページロードが完了します。
その後にボタンをクリックしてもイベントが発生しません。

クリックによるイベントのトリガについて、
初期ロード時に上述の無駄な関数 call をおこさない方法について、
何かご指摘を頂けないでしょうか。

eventListener と style.display については下記を
参考させていただきました。

http://www.vividcode.info/js/event/eventListener.xhtml
http://js.studio-kingdom.com/javascript/element/addeventlistener
http://www.pori2.net/js/DOM/7.html

宜しくお願い致します。

回答No.2

Ogre7077 · ベストアンサー

JavaScript には「関数オブジェクト」なる存在があります。
addEventListener の第二引数は、このオブジェクトを指定しなければいけません。

関数オブジェクトの書き方
var funcObject = function(){ 処理内容 };

ゆえに
誤) addInput1.addEventListener("click",hyoji(0), false);
正) addInput1.addEventListener("click", function(event){ hyoji(0) }, false);

個人的には、この様に書けば理解しやすいのでお勧めします
var funcObject = function(event){ hyoji(0) };
addInput1.addEventListener("click", funcObject, false);

余談ではありますが、以下の処理は addEventListener と被っていますので削除すべきかと
var addOnclick1 = document.createAttribute('onclick');
addOnclick1.nodeValue = "hyoji(0)";
addInput1.setAttributeNode(addOnclick1);

余談の余談ですが、onclick ならもっと良い書き方があります
addInput1.onclick = function(){ hyoji(0) };

お礼

有り難うございました。

余談についても、参考にさせていただきました。

回答No.1

Picosoft

addInput1.addEventListener("click",hyoji(0), false);
とすると、リスナー登録時にhyoji(0)が呼ばれてしまいます。

　addInput1.addEventListener("click", function(){hyoji(0);}, false);
としてください。

お礼

有り難うございました。