1

編集＃2：

JSフィドルを作成しました... http：//jsfiddle.net/N2p6G/（正しく機能すると確信しているものをハードコーディングしましたが、問題はまだあります）

オリジナル：

それで、私は何万行ものjavascriptを書き、このようなコードを何百回も使用しましたが、何が起こっているのかわかりません。

blacklistitembutton.onclick = function() {
  console.log("clicked.");
}

上記のコードは機能していないようです...そして理由がわかりません

実際、私は同じファイルで以前に同じ方法を使用しています...そしてそれはうまくいきます！

settings.onclick = function() {
  settings_popup.toggle();
}

編集：

forループで実行されているという事実と関係があるのでしょうか。これがコードです...

var blacklistButton = document.createElement('input');
blacklistButton.type = 'button';
blacklistButton.value = "Add Current Site to Blacklist";
blacklistButton.onclick = function() {
  console.log('blacklistButton clicked');
}

for (var i=0;i<blacklist.length;i++) {
  var blacklistitembutton = document.createElement('div');
  blacklistitembutton.type = 'button';
  blacklistitembutton.blacklistValue = blacklist[i];
  blacklistitembutton.value = "X";
  blacklistitembutton.onclick = function() {
    console.log("clicked.");
  }
}

次に、blacklistButtonとすべてのblacklistitembuttonsの両方がelement.appendChildを介してドキュメントに配置されます（そしてそれらはすべて正常に表示されます！）

blacklistButton onclickは正常に起動しますが、blacklistitembuttononclickは起動しません。

4

4 に答える 4

2 
document.addEventListener('click', function(){
    console.log('clicked');
}, false);

編集：

これがフィドルでのコードの書き直しです：http：//jsfiddle.net/N2p6G/1/

あなたのコードには私を心配することがたくさんあります。うまくいけば、私の書き直しから、いくつかのことを処理するためのより良い方法があることがわかります。

1）最初にdocument.write（）を使用している理由がわかりません。それにはほとんど目的がありません。

2）DOMの方法を変更しすぎています。コードで作成しているDOM要素のいくつかは、htmlのターゲットの場所としてより適切に機能します。動的に作成された入力ボタン要素のみをjavascriptで実行する必要があります。DOMの変更はできるだけ少なくする必要があることを忘れないでください。

3）onclick、onsubmit、onhoverなどの構文を使用してイベントを割り当てないでください。イベントは、addEventListenerを使用してDOM要素にのみバインドする必要があります。適切な方法で行うことのもう1つの利点は、必要に応じて、同じタイプの複数のイベントを同じ要素に割り当てることができることです。また、私が含めていないいくつかの追加の状態コードを使用すると、必要に応じて後で特定のイベントを選択的に削除できます。

4）数年前、innerHTMLと文字列テンプレートを使用する方がDOM作成メソッドを使用するよりも高速/優れているかどうかについて議論がありました。しばらくの間、最善の解決策は、documentFragmentsと2つの方法の組み合わせを使用することでした。最近では、すべてのブラウザが非常に高速であるため、それはもはや重要ではありません。したがって、簡単にするために、innerHTMLを使用することをお勧めします。

これは、「DOMにあまり触れない」というルールにも戻ります。私のコードを見ると、最後に単一の文字列として結合される要素の配列として、最終的なhtmlを単純に組み立てていることがわかります。次に、単一のinnerHTMLステートメントを使用してDOMにレンダリングされます。DOMに何度も触れるのではなく、一度だけ触れています。

5）最後のビットは再びイベントに入ります。コードの最初と最後で、DOM要素のイベントをどこにどのように追加したかを確認できます。実際、最初のaddEventListenerを最後に移動して、すべてのイベント宣言をグループ化することもできますが、実際には問題ではありません。何がうまくいっているのかを理解できるように、上部に残しておきました。

お役に立てれば。

于 2012-08-02T18:38:46.367 に答える
0

無制限のイベントバインディングの場合は、addEventListenerまたはattachEventメソッドを使用します。従来の方法を使用して、同じタイプのイベントを複数追加することはできません。

于 2012-08-02T18:44:08.553 に答える
0

ここに入力したタイプミスかどうかはわかりませんが、ループでは「div」を作成し、それに「ボタン」のタイプを割り当てています。それは機能しますか、それともエラーをスローしますか？もしそうなら、それはイベントハンドラーが関数を取得していない理由を説明しています。それを「入力」にしてみて、今は機能するかどうかを確認してください。

于 2012-08-02T20:30:19.693 に答える
0

修正しました！

blacklistitem.innerHTML += blacklist[i];

^はそれを台無しにしていました、コードのこの時点で、blacklistitemはまだjavascriptアイテムであり、ドキュメントの親になる要素にまだ追加されていません

だから私はブラックリスト[i]をスパンタグに貼り付けて子として追加しただけで、今はうまく機能しています:)

于 2012-08-02T21:18:00.183 に答える