ホームページ  >  記事  >  ウェブフロントエンド  >  jsによって動的に追加されたDIVのonclickイベントの簡単な例

jsによって動的に追加されたDIVのonclickイベントの簡単な例

高洛峰
高洛峰オリジナル
2016-12-24 15:20:131965ブラウズ

: 最も簡単なのは: 单

<input type="button" onclick="alert(this.value)" value="我是 button" />

onClickイベントを動的に追加する:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick(){alert(this.value)};
</script>

匿名関数 function () {}を使用すると、以下のようになります:

R
<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick=function(){alert(this.value)};
</script>
E

上記 実際、メソッドの原理は同じで、すべて onclick 属性の値を定義します。 obj.onclick=method1; obj.onclick=method2; obj.onclick=method3 のように、obj.onclick が複数回定義されている場合は、obj.onclick=method3 の最後の定義のみが有効になることに注意してください。最初の 2 つの定義は、最後の定義によって上書きされます。

IE のattachEvent を見てください:

<input type="button" value="我是拉登" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.attachEvent("onclick",method1);
bObj.attachEvent("onclick",method2);
bObj.attachEvent("onclick",method3);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

実行順序は、スタック内の変数と同様に、メソッド 3 > メソッド 2 > メソッド 1 です。 AttachEvent の最初のパラメータは on で始まり、onclick/onmouseover/onfocus などになることに注意してください。

IE でattachEvent を使用した後は、detachEvent を使用してメモリを解放するのが最善であると言われています (確認なし)。

もう一度 Firefox の addEventListener を見てください:

<input type="button" value="我是布什" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.addEventListener("click",method1,false);
bObj.addEventListener("click",method2,false);
bObj.addEventListener("click",method3,false);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>


ff での実行順序は、IE のちょうど逆で、先入れ先出しであることがわかります。 addEventListener には 3 つのパラメータがあることに注意してください。最初のパラメータは、クリック/マウスオーバー/フォーカスなどの「on」を除いたイベント名です。

js によって動的に追加された DIV 内の onclick イベントの上記の簡単な例は、エディターによって共有されたすべてのコンテンツです。これが参考になることを願っています。また、皆さんが PHP 中国語 Web サイトをサポートしてくれることを願っています。


🎜js によって動的に追加された DIV 内の onclick イベントのより簡単な例と関連記事については、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜🎜
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。