Eigene DOM-Events feuern und verarbeiten

[Don P]

Hallo,

Mich beschäftigt ein ganz ähnliches Problem wie dieses, d.h. ich möchte, dass bestimmte Bedienelemente auf einen Event reagieren, der von sonstwo gefeuert wird, ohne dass das feuernde Element überhaupt von der Existenz der reagierenden Elemente "weiß".

Eine gute Demo für viele Arten von Events findet man hier, im dortigen Test 10 wird auch ein selbstdefinierter (custom) Event gefeuert, Code siehe unten.

Das Problem dabei ist, dass man den Event direkt auf das gewünschte Zielelement feuern muss. Aber wenn dieses bekannt ist und angegeben werden *muss*, dann kann ich ja komplett auf so einen Event verzichten und die gewünschte Aktion direkt starten, z.B. das Zielelement auf disabled setzen oder was immer. Das ist es aber gerade, was ich vermeiden will. Die Zielelemente sollen einfach auf den Event "lauschen" und ggf. darauf reagieren.

Ein funktionierender Code aus der genannten Demo:

	<div id="test10">  
		<h2>10) Fire custom event on demand</h2>  
  
		<script type="text/javascript">  
[code lang=javascript]			function onTest10ButtonPoked(evt) {  
				//make second button listen for custom event:  
				var btn = document.getElementById("test10_2");  
				btn.addEventListener("thisisnotarealevent",onTest10CustomEventFired,false);  
  
				var newEvt = document.createEvent("Events");  
				newEvt.initEvent("thisisnotarealevent",true,true);  
  
				btn.dispatchEvent(newEvt); // <-- hier wird auf's Zielelement gefeuert  
			}  
			function onTest10CustomEventFired(evt) {  
				output("custom 'thisisnotarealevent' event fired; test #10 passed.");  
				showProps(evt);  
			}  
		</script>  
  

~~~		<p>The second button below listens for a custom "thisisnotarealevent" event. The first button creates a custom event of that type and dispatches it to the second.</p>  
		<p>  
  
			<button id="test10\_1" onclick="onTest10ButtonPoked(event);">click to fire custom event</button>  
			<button id="test10\_2">handles "thisisnotarealevent"</button>  
		</p>  
	</div>  
[/code]  
  
Wie soll man nun aber den Event feuern, wenn das Zielelement nicht bekannt ist? Man kann ihm einen Eventlistener wie im obigen Beispiel zuweisen, aber es reagiert nicht, wenn man statt btn.dispatchEvent(newEvt); z.B. einfach `document.body.dispatchEvent(newEvt);`{:.language-javascript} schreibt, um den Event zu feuern.  
  
In [einem anderen Tutorial](http://www.howtocreate.co.uk/tutorials/javascript/domevents) steht zum Thema "custom events":  
Zitat:  
"Fake event objects are created using the document.createEvent method [...]. They are then prepared [...] and finally they are then fired on the desired target element using the element.dispatchEvent method."  
  
Also wieder "fired on the desired target element" :-(. Wie gesagt, wenn man das gewünschte target element kennt, dann braucht man doch keinen solchen Event zu feuern, sondern kann die Aktion gleich direkt ausführen.  
  
DOM-Event-mäßig bin ich leider überhaupt nicht bewandert, habe bis jetzt immer nur mit den normalen onclick-, onchange- usw. Attribut-Events gearbeitet.  
  
Kann mir da jemand weiterhelfen?  
  
Gruß, Don P