web-dev-qa-db-ja.com

onclickイベントをdivに追加します

これが許可されているか、可能かどうかはわかりません。 onclickイベントでdiv要素を作成して、divの領域のどこかをクリックするとイベントが実行されるようにすることは可能ですか？.

たとえば、JAVASCRIPT：

var divTag = document.createElement("div");
divTag.id="new-ID"; 
var onClickCommand = "printWorking()"   //printworking is another method that simply print "I'm working" to the console
divTag.onclick = onClickCommand;
console.log("onclick command added");
console.log(divTag.onclick);
parentDiv.appendChild(divTag); //This simply adds the div tag to the page.

生成されるHTML：

 <!--<div id="new-ID">-->

 whatever content I decide to add to the divTag.innerHTML

生成されたdivを通過するonclickコマンドがないことに気付きました。許可されていないので、これは？

それでは2つの質問です。

1：onclickをdivに追加し、divの領域がクリックされた場合にonclickを発生させることは可能ですか？ 2：「はい」の場合、onclickメソッドがdivを通過しないのはなぜですか。

とても奇妙です：

divTag.setAttribute("onclick", "printWorking()");

上記は完璧に機能します。

以下はすべて、onclickをdivに渡しません。

divTag.onclick=printWorking;

divTag.onclick="printWorking";

divTag.onclick="printWorking()";

他の複数の亜種も試されています。

javascriptcsshtmlonclick
27
OVERTONE

Divにonclickを追加して、divのいずれかの領域がクリックされた場合に発生させることは可能ですか？.

はい...ただし、注意して行う必要があります。キーボードアクセスを許可するメカニズムがあることを確認します。 機能するものの上に構築

はいの場合、onclickメソッドがdivに通らないのはなぜですか。

関数が期待される場所に文字列を割り当てています。

divTag.onclick = printWorking;

ただし、Internet Explorerの古いバージョンはライブラリを使用して抽象化する必要があるため、イベントハンドラーを割り当てるより良い方法があります。多くの 非常に小さなイベントライブラリ があり、すべての主要なライブラリ jQuery ）にはイベント処理機能があります。

とは言っても、現在は2019年で、Internet Explorerの古いバージョンは実際にはもう存在しないため、 addEventListener に直接アクセスできます

23
Quentin

次のようにonclickを割り当てます。

_divTag.onclick = printWorking;
_

Onclickプロパティは、割り当て時に文字列を取りません。代わりに、関数参照（この場合はprintWorking）を取ります。
onclick属性は、HTMLで割り当てられている場合、文字列にすることができます。 <div onclick="func()"></div>が、これは一般的に推奨されません。

2
Digital Plane

すべてがうまく機能します。 divtag.onclickは使用できません。「onclick」属性が存在しないためです。最初に.setAttribute（）を使用してこの属性を作成する必要があります。これを見てください http://reference.sitepoint.com/javascript/Element/setAttribute 「-」を付ける前に、まずドキュメントを読む必要があります。

2
godlark