[JavaScript] Javascripts "überschreiben" sich anscheinend!

BF1942 Freak · 15. Juni 2007

Hallo!

Ich binde in meine HTML-Dateien JScripte ein.
Ein einer z.b. so:

HTML:

<script src="script1" type="text/javascript"></script>
<script src="script2" type="text/javascript"></script>
<script src="script3" type="text/javascript"></script>
<script src="script4" type="text/javascript"></script>

aber das problem ist, dass die sich anscheinend "überschreiben", denn es funktioniert immer nur das, was an letzter stelle steht.

alle fangen mit

Code:

window.onload = function()
{

an, ist das ein Problem? aber alle 4 jscript in eine datei machen kann ich auch nicht, da ich je nach html seite nicht alle vier skripts auf der seiten haben will

Sniker · 16. Juni 2007

AW: [JavaScript] Javascripts "überschreiben" sich anscheinend!?

Gib den Funktionen in deinen Skripten alle einen namen, dann kannst du die über <body onload="function1();function2();function3()"> starten.
Sonst passiert das was du eben beschrieben hast die überschreiben sich alle gegenseitig.

BF1942 Freak · 16. Juni 2007

AW: [JavaScript] Javascripts "überschreiben" sich anscheinend!?

wollte eig möglichst zwischen HTML und JS code trennen, deswegen auch die event-handler ausgelagert. gibts nicht noch eine andere möglichkeit?

Sniker · 16. Juni 2007

Also deine funktionen dürfen halt nicht anonym sein. was du machen kannst ist ein Onload script schreiben.
window.onload = function() {
function1();
function2();
function3();
}

Keita · 16. Juni 2007

Events sollten über addEventListener() bzw. attachEvent() manipuliert werden, dann gibt es auch keine Probleme mit konsekutiven Zuweisungen.

greetings, Keita

BF1942 Freak · 16. Juni 2007

muss ich dann den alles doppelt schreiben? einmal für IE und einmal für W3C?

kann man denn addEventListener und attachEvent zusammen in eine Datei tun? Verwirrt das nicht den IE oder die W3C-browser?

EDIT: habs jetzt mit addevent und attachevent probiert, aber funktioniert nicht.

Code:

function init()
{
    document.forms[0].elements[0].focus();
}

window.addEventListener('onload', init, false);
window.attachEvent('onload', init);

EDIT2: sollte man auf formulare eigentlich mit document.forms[0].element_name.value zugreifen oder mit getElementById['element_name'].value ?

EDIT3: Hm.. ich verstehe das nicht. habe es jetzt mal nur mit addeventlistener probiert ohne danach noch attachevent, aber auch dann gehts nicht. außerdem hab ich mal das window.addEventListener durch document.addEventListener ersetzt. aber das bringt auch alles nichts. wäre froh, wenn mir ein profi grad sagen könnte, wie man diese methode richtig verwendet. ich glaub ich mach das falsch...
bei selfhtml findet man dazu auch fast nix...

Sgt_H4rtman · 18. Juni 2007

Hallo,

als erstes fassen wir die MSIE und die W3C Methoden mal zu jeweils einer zusammen.

Code:

// >>>>>>>>>>>>>>>>>>>>>> Handlerobjekt für Events. <<<<<<<<<<<<<<<<<<<<<<<< //
/**
 *
 * myEvent Object => based on Code by John Resig
 * Dient zum (De)-Registieren von Events nach DOM-Level 3.
 * @class
 */
var myEvent = {
	/**
	 *
	 * Methode zur Registrierung eines Event zu einem Objekt.
	 * @param object obj - The DOM-HTML-Object, the event shall be registered to;
	 * @param string type - The type of the event, e.g. click, mouseover, etc;
	 * @param object fn - The Function, that should be executed, if the event is released;
	 * @return null;
	 */
	 addEvent: function (obj, type, fn) {
		if (obj.addEventListener) { // Mozilla, Opera, Safari & Co.
			obj.addEventListener(type, fn, false);
		} else if (obj.attachEvent) { // Microsoft Internet Explorer
			obj['e' + type + fn] = fn;
			obj[type + fn] = function() { obj['e' + type + fn] ( window.event ); };
			obj.attachEvent('on' + type, obj[type + fn]);
		}
		return null;
	},
	
	/**
	 *
	 * Methode zur Deregistrierung eines Events von einem Objekt.
	 * @param object obj - The DOM-HTML-Object, the event is registered to;
	 * @param string type - The type of the event, e.g. click, mouseover, etc;
	 * @param object fn - The Function, that should be executed, if the event is released;
	 * @return null;
	 */
	removeEvent: function (obj, type, fn) {
		if (obj.removeEventListener) { // Mozilla, Opera, Safari & Co.
			obj.removeEventListener(type, fn, false);
		} else if (obj.detachEvent) { // Microsoft Internet Explorer
			obj.detachEvent('on' + type, obj[type + fn]);
			obj[type + fn] = null;
			obj['e' + type + fn] = null;
		}
		return null;
	}
};

Diese kannst Du dann wie folgt verwenden:

Code:

myEvent.addEvent(document.getElementsByTagName('body')[0], 'load', init);

Das wäre die korrekte Syntax. Wichtig - bei dem Typ des Events immer das on weglassen. Bei obigen Beispiel könntest Du aber ein Zeitproblem bekommen. Zum Zeitpunkt des Auslösens des Events ist das vermeintliche Formularelement nämlich unter Umständen noch gar nicht vorhanden. Du hast also enbtweder die Möglichkeit, per try-catch die Methode solange aufzurufen, bis das Element existert oder Du suchst einen anderen Lösungsweg -> Dieses konkrete Problem kann man auch mit einem einfachen Script-Tag nach dem </form> lösen.

Ciao

BF1942 Freak · 18. Juni 2007

Ich hab jetzt mal probiert das so nachzubauen, aber es funktioniert nur im FF und nicht im MSIE. wo liegt der fehler?

Code:

function init()
{
    document.forms[0].elements[0].focus();
}


if (window.addEventListener)
{
    window.addEventListener('load', init, false);
}
else if (document.getElementsByTagName['body'][0].attachEvent)
{
    document.getElementsByTagName['body'][0].attachEvent('onload', init);
}

Zweipunktnull · 18. Juni 2007

getElementsByTagName ist eine Methode, kein Array.
Insofern ist ist getElementsByTagName['body'][0] falsch. getElementsByTagName('body')[0] wäre richtig. im ff funktioniert es, weil der erst gar nicht in den else zweig geht.

BF1942 Freak · 19. Juni 2007

Ok, habs jetzt mit dieser funktion gemacht, allerdings hab ich jetzt das nächste problem:

Code:

function addEvent(object, type, listener)
{
    if (object.addEventListener)
    {
        object.addEventListener(type, listener, false);
    }
    else if (object.attachEvent)
    {
        object.attachEvent('on' + type, listener);
    }
}

addEvent('window', 'load', addEvent(getElementById('form'), 'submit', check));

die Funktion check funktioniert definitiv. Wieso kann man eine addEvent-Funktion nicht in einer anderen addEvent-Funktion aufrufen?

Zweipunktnull · 19. Juni 2007

getElementById('form')

Was ist das? Zwei Fehler:
document.getElementsByTagName('form')[0]

Ich denke nicht, dass du dem Formular die ID form gegeben hast. Du meinstest sicher getElementsByTagName, oder?

Suche

BF1942 Freak

Cadet 4th Year

Sniker

Cadet 2nd Year

BF1942 Freak

Cadet 4th Year

Sniker

Cadet 2nd Year

Keita

Lt. Commander

BF1942 Freak

Cadet 4th Year

Sgt_H4rtman

Ensign

BF1942 Freak

Cadet 4th Year

Zweipunktnull

Commander

BF1942 Freak

Cadet 4th Year

Zweipunktnull

Commander

Ähnliche Themen