Mit jQuery ist es möglich, eigene JavaScript-Events zu definieren und auszulösen (trigger). Alle Elemente, die an dieses Ereignis gebunden (bind) sind, werden dann benachrichtigt und können eine eigene Ereignisbehandlung vornehmen:
Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html> <head> <title>Bind and trigger events</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> *{margin:0;padding:0;border:0;} html,body{width:100%;height:100%} .box{ width: 50%; height: 100%; } #leftBox{ background-color: burlywood; float: left; } #rightBox{ background-color: cadetblue; float: right; } </style> </head> <body> <div class="box" id="leftBox"></div> <div class="box" id="rightBox"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#leftBox').bind('myEvent', function(event, argument){ this.innerHTML = 'Argument "'+argument+'" received at: '+event.timeStamp; }); $('#rightBox').bind('myEvent', function(event, argument){ this.innerHTML = 'Argument "'+argument+'" received at: '+event.timeStamp; }); $('#leftBox,#rightBox').trigger('myEvent', 'Hello World'); }); </script> </body> </html> |
Im Ergebnis sieht es dann so aus, dass beide Boxen auf das ausgelöste Event (myEvent
) reagieren und einen Text anzeigen, der diesem ähnelt:
Linke Box: Argument „Hello World“ received at: 1342172027828
Rechte Box: Argument „Hello World“ received at: 1342172027830
In der Fachsprache die Verwendung dieses Programmierschemas als „Event Pooling“ bezeichnet. Siehe Event Pooling with jQuery Using Bind and Trigger: Managing Complex Javascript.
Thanks very much