Quelltext der Datei: http://www.michaelster.ch/jsTestFolder/onblur_onfocus.htm

Dateigrösse: 3.47 kb

[Anzeige ohne Zeilennummern]

1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>addEventListeners</title>
<style type="text/css" media="all">
body    { font: 20px times, sans-serif; padding:10px; }
.tool    { -moz-opacity: 0.85; opacity: 0.85; filter: alpha(opacity=85); }
.divs    { padding:10px 0; width:25em; border-bottom: 1pt dashed #69c; }
.noBorder    { border:0 none; font: bold 20px calibri,times; background-color:#6699cc !important; padding:1pt 5pt; margin:0; }
</style>
<script type="text/javascript">
function ausgabe(text) {
    text = text=="" ? "Focus auf Text A" : text;
    document.getElementById("txt").innerHTML=text;
}
/* */
function loeschen() {
    document.getElementById("txt").innerHTML="";
}
function show(msg) {
    if(msg=='undefined') msg='...';
    document.forms[1].elements[0].value=msg;
}
function colore(c) {
    document.forms[1].elements[0].style.color=c;
    document.forms[1].elements[0].setAttribute("className","noBorder");
    document.getElementById("txt").innerHTML="new event";
}

function eventer(elem, evType, fn, useCapture) {
    if (elem.addEventListener) { 
      elem.addEventListener(evType, fn, useCapture); 
      return true; 
    }
    else if (elem.attachEvent) { 
      var r = elem.attachEvent('on' + evType, fn); 
      EventCache.add(elem, evType, fn);
      return r; 
    }
    else {
      elem['on' + evType] = fn;
    }
}
var EventCache = function() {
    var listEvents = [];
    return {
        listEvents : listEvents,
    
        add : function(node, sEventName, fHandler, bCapture) {
            listEvents.push(arguments);
        },
    
        flush : function() {
            var i, item;
            for(i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                
                if(item[0].removeEventListener){
                    item[0].removeEventListener(item[1], item[2], item[3]);
                }
                
                /* From this point on we need the event names to be prefixed with 'on" */
                if(item[1].substring(0, 2) != "on"){
                    item[1] = "on" + item[1];
                }
                
                if(item[0].detachEvent){
                    item[0].detachEvent(item[1], item[2]);
                }
                
                item[0][item[1]] = null;
            }
        }
    }
}();
function E(id,ev,f) {
    eventer(id,ev,f,false);
}
function geladen() {
    alert("newDiv successfully inserted!");
}
function b_click() {
    newDiv=document.createElement("div");
    newDiv.setAttribute("id","nd");
    newDiv.id="nd";
    //newDiv.innerText="ein neuer Container..."; // only IE.
    text=document.createTextNode("ein neuer Container!");
      newDiv.appendChild(text);
    document.getElementById("addEv").appendChild(newDiv);
    newDiv.onclick=function() { eventer("headline", "mouseover", geladen(), true); }
}
window.onload=b_click
</script>
</head>

<body>
<h3 id="headline">addEventListeners</h3>
Text A:
<form name="myForm">
  <input type="text" 
         name="Text1"
         size="40"
         value=""
         id="Text1"
         onfocus="ausgabe(this.value);"
         onblur="eventer('event_btn','click',show('Les vignerons de Courbeil s\'amusent'), false);" />
</form>
Text B:
<form name="myForm">
  <input type="text" 
           name="Text2"
         size="40"
         value=""
         onfocus="ausgabe('Focus auf Text B');"
         onblur="loeschen();" />
</form>

<div id="event_btn" class="divs">eventHandler</div>

<div onclick="eventer('txt','mouseover',colore('#ff9966'), false);" class="divs">TextB::ColorCambio</div>

<div id="txt" onclick="b_click();" class="divs">....txt...</div>

<div id="addEv" class="divs"></div>

</body>
</html>
<!-- onclick="E();" -->