onblur_onfocus.htm

Dateigrösse: 3.47 kb

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3 <head>
  4     <title>addEventListeners</title>
  5 <style type="text/css" media="all">
  6 body    { font: 20px times, sans-serif; padding:10px; }
  7 .tool    { -moz-opacity: 0.85; opacity: 0.85; filter: alpha(opacity=85); }
  8 .divs    { padding:10px 0; width:25em; border-bottom: 1pt dashed #69c; }
  9 .noBorder    { border:0 none; font: bold 20px calibri,times; background-color:#6699cc !important; padding:1pt 5pt; margin:0; }
 10 </style>
 11 <script type="text/javascript">
 12 function ausgabe(text) {
 13     text = text=="" ? "Focus auf Text A" : text;
 14     document.getElementById("txt").innerHTML=text;
 15 }
 16 /* */
 17 function loeschen() {
 18     document.getElementById("txt").innerHTML="";
 19 }
 20 function show(msg) {
 21     if(msg=='undefined') msg='...';
 22     document.forms[1].elements[0].value=msg;
 23 }
 24 function colore(c) {
 25     document.forms[1].elements[0].style.color=c;
 26     document.forms[1].elements[0].setAttribute("className","noBorder");
 27     document.getElementById("txt").innerHTML="new event";
 28 }
 29 
 30 function eventer(elem, evType, fn, useCapture) {
 31     if (elem.addEventListener) { 
 32       elem.addEventListener(evType, fn, useCapture); 
 33       return true; 
 34     }
 35     else if (elem.attachEvent) { 
 36       var r = elem.attachEvent('on' + evType, fn); 
 37       EventCache.add(elem, evType, fn);
 38       return r; 
 39     }
 40     else {
 41       elem['on' + evType] = fn;
 42     }
 43 }
 44 var EventCache = function() {
 45     var listEvents = [];
 46     return {
 47         listEvents : listEvents,
 48     
 49         add : function(node, sEventName, fHandler, bCapture) {
 50             listEvents.push(arguments);
 51         },
 52     
 53         flush : function() {
 54             var i, item;
 55             for(i = listEvents.length - 1; i >= 0; i = i - 1) {
 56                 item = listEvents[i];
 57                 
 58                 if(item[0].removeEventListener){
 59                     item[0].removeEventListener(item[1], item[2], item[3]);
 60                 }
 61                 
 62                 /* From this point on we need the event names to be prefixed with 'on" */
 63                 if(item[1].substring(0, 2) != "on"){
 64                     item[1] = "on" + item[1];
 65                 }
 66                 
 67                 if(item[0].detachEvent){
 68                     item[0].detachEvent(item[1], item[2]);
 69                 }
 70                 
 71                 item[0][item[1]] = null;
 72             }
 73         }
 74     }
 75 }();
 76 function E(id,ev,f) {
 77     eventer(id,ev,f,false);
 78 }
 79 function geladen() {
 80     alert("newDiv successfully inserted!");
 81 }
 82 function b_click() {
 83     newDiv=document.createElement("div");
 84     newDiv.setAttribute("id","nd");
 85     newDiv.id="nd";
 86     //newDiv.innerText="ein neuer Container..."; // only IE.
 87     text=document.createTextNode("ein neuer Container!");
 88       newDiv.appendChild(text);
 89     document.getElementById("addEv").appendChild(newDiv);
 90     newDiv.onclick=function() { eventer("headline", "mouseover", geladen(), true); }
 91 }
 92 window.onload=b_click
 93 </script>
 94 </head>
 95 
 96 <body>
 97 <h3 id="headline">addEventListeners</h3>
 98 Text A:
 99 <form name="myForm">
100   <input type="text" 
101          name="Text1"
102          size="40"
103          value=""
104          id="Text1"
105          onfocus="ausgabe(this.value);"
106          onblur="eventer('event_btn','click',show('Les vignerons de Courbeil s\'amusent'), false);" />
107 </form>
108 Text B:
109 <form name="myForm">
110   <input type="text" 
111            name="Text2"
112          size="40"
113          value=""
114          onfocus="ausgabe('Focus auf Text B');"
115          onblur="loeschen();" />
116 </form>
117 
118 <div id="event_btn" class="divs">eventHandler</div>
119 
120 <div onclick="eventer('txt','mouseover',colore('#ff9966'), false);" class="divs">TextB::ColorCambio</div>
121 
122 <div id="txt" onclick="b_click();" class="divs">....txt...</div>
123 
124 <div id="addEv" class="divs"></div>
125 
126 </body>
127 </html>
128 <!-- onclick="E();" -->