Heim  >  Artikel  >  Web-Frontend  >  Einfaches Beispiel eines von js dynamisch hinzugefügten Onclick-Ereignisses in DIV

Einfaches Beispiel eines von js dynamisch hinzugefügten Onclick-Ereignisses in DIV

高洛峰
高洛峰Original
2016-12-24 15:20:131966Durchsuche

Am einfachsten ist es:

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

Onclick-Ereignis dynamisch hinzufügen:

<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>

Wenn Sie die anonyme Funktion function(){} verwenden, ist dies wie folgt:

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

Die oben genannten Methoden sind tatsächlich dieselben Im Prinzip definieren alle den Wert des onclick-Attributs. Es ist zu beachten, dass, wenn obj.onclick = method1; obj.onclick = method3, nur die letzte Definition von obj.onclick = method3 wirksam wird. und die ersten beiden Definitionen werden wirksam. Die Definitionen von wurden durch die letzte überschrieben.

Sehen Sie sich das attachmentEvent im IE an:

<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>

Die Ausführungsreihenfolge ist Methode3 > Methode1, zuerst in, zuletzt out und Variablen auf dem Stapel sind ähnlich. Es ist zu beachten, dass der erste Parameter in attachmentEvent mit on beginnt, was onclick/onmouseover/onfocus usw. sein kann.

Es wird gesagt (ohne Bestätigung), dass es nach der Verwendung von attachmentEvent im IE am besten ist, es zu verwenden detachEvent, um es freizugeben.

Sehen Sie sich addEventListener in Firefox an:

<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>

Sie können sehen, dass die Ausführungsreihenfolge in ff Methode1 ist > ; method2 > method3 , genau das Gegenteil von IE, First In First Out. Es ist zu beachten, dass addEventListener über drei Parameter verfügt. Der erste ist der Ereignisname ohne „on“, z. B. click/mouseover/focus usw.

Das obige einfache Beispiel des von js dynamisch hinzugefügten Onclick-Ereignisses in einem DIV ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere einfache Beispiele für Onclick-Ereignisse in DIVs, die von js dynamisch hinzugefügt werden, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn