Für Benutzerereignistypen werden am häufigsten Maus, Tastatur und Browser verwendet. 1. Mausereignisse: Mausereignisse werden häufig verwendet. Das folgende Beispiel testet verschiedene Mausereignisse Code kopieren Der Code lautet wie folgt: <br> Funktionshandle (oEvent) {<br> var disp = document.getElementById("display");<br> if (window.event) oEvent = window.event; // Kompatibilität behandeln und das Objekt <br> abrufen disp.innerHTML = "Maus-Ereignisname:" oEvent.type "<br>";<br> }<br> window.onload = function() {<br> var oP = document.getElementById("box");<br> oP.onmousedown = handle;<br> oP.onmouseover = handle;<br> oP.onmouseup = handle;<br> oP.onmouseout = handle;<br> oP.onclick = handle;<br> oP.ondblclick = handle;<br> }<br> <div id="box" style="width:100px;height:100px;background:#ddd;"><br> Packungsinhalt<br> <p id="display"></p><br> <br><br> <br>Maustastenwert-Tastentest (mit Vergleichstabelle)<br> </div> <p> </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201501/201501201527403.png"></p> <p>Code kopieren</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="82276" class="copybut" id="copybut82276" onclick="doCopy('code82276')"> Der Code lautet wie folgt:<u></u></a> <script language="javascript"></span> Funktion TestClick(oEvent) {</div> var oDiv = document.getElementById("display");<div class="codebody" id="code82276"> Wenn (window.event)<br> oEvent = window.event;<br> oDiv.innerHTML = oEvent.button //Wert der Schaltfläche ausgeben<br> }<br> document.onmousedown = TestClick;<br> window.onload = TestClick; //Testen, dass keine Taste gedrückt wird <br> <p id="display"></p><br> <br> <p><strong>2. Tastaturereignisse</strong></p> <p>Es gibt nicht viele Arten von Tastaturereignissen, sondern nur drei Arten von Ereignissen. </p> <p>keydown (drücken Sie eine Taste und halten Sie sie gedrückt, um kontinuierlich auszulösen) </p> <p>Tastendruck (wird ausgelöst, wenn eine Taste gedrückt und ein Zeichen generiert wird, d. h. Funktionstasten wie Umschalt, Alt, Strg usw. werden ignoriert) </p> <p>keyup (wird ausgelöst, wenn eine Taste losgelassen wird) </p> <p>Beispiel für die Tastaturüberwachung: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="60249" class="copybut" id="copybut60249" onclick="doCopy('code60249')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code60249"> <br> <script language="javascript"><br> Funktionshandle (oEvent) {<br> Wenn (window.event) oEvent = window.event; // Behandlungskompatibilität, Ereignisobjekte abrufen <br> var oDiv = document.getElementById("display");<br> oDiv.innerHTML = oEvent.type " " //Name des Ausgabeereignisses<br> }<br> window.onload = function() {<br> var oTextArea = document.getElementById("textin");<br> oTextArea.onkeydown = handle; //Alle Tastaturereignisse abhören<br> oTextArea.onkeyup = handle;<br> oTextArea.onkeypress = handle;<br> }<br> <textarea rows="4" cols="50" id="textin"><br> <p id="display"></p><br> <br><br> <br>Für die Tastatur ist das Wichtigste nicht der Name des Ereignisses, sondern welche Taste gedrückt wurde. Da IE kein charCode-Attribut hat und der keyCode nur dann mit dem Standard-DOM-Schlüsselcode übereinstimmt, wenn die Ereignisse keydown und keyup auftreten, <br> </div>Entspricht dem Tastencode im Tastendruckereignis, daher wird die folgende Methode verwendet. <p></p> <p></p> <p>Code kopieren</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="99770" class="copybut" id="copybut99770" onclick="doCopy('code99770')"> Der Code lautet wie folgt:<u></u>oEvent.charCode = (oEvent.type == "keypress ")? oEvent.keycode:();</a></span> </div>Der Grund, warum keyCode nicht verwendet wird, liegt darin, dass er Tastaturtasten und keine Ausgabezeichen darstellt. Daher ist der Schlüsselcode bei der Ausgabe von „a“ und „A“ gleichwertig und der Zeichencode wird durch Zeichen unterschieden. <div class="codebody" id="code99770"> </div>Außerdem ist der Tastencodewert des Standard-DOM immer 0 <p>Beispiel: Eigenschaften für Tastaturereignisse: </p> <p></p> <p></p> <p>Code kopieren</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="81207" class="copybut" id="copybut81207" onclick="doCopy('code81207')"> Der Code lautet wie folgt:<u><div class="codebody" id="code81207"> <br> <script language="javascript"><br> Funktionshandle (oEvent) {<br> var oDiv = document.getElementById("display");<br> Wenn (window.event) oEvent = window.event; // Behandlungskompatibilität, Ereignisobjekte abrufen <br> //Legen Sie den Wert von ie charcode<br> fest oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;<br> oDiv.innerHTML = oEvent.type „:charCode“ oEvent.charCode „keyCode“ oEvent.keyCode „<br>“ //Ausgabetest<br> }<br> window.onload = function() {<br> var oTextArea = document.getElementById("textin");<br> oTextArea.onkeydown = handle; //Alle Tastaturereignisse abhören<br> oTextArea.onkeypress = handle;<br> }<br> <textarea rows="4" cols="50" id="textin"><br> <p id="display"></p><br> <br><br> <br><br>3.htm-Ereignis</div> </u><p>Für Browser haben verschiedene HTML-Ereignisse ihre eigenen Ereignisse, von denen einige häufig von Benutzern angetroffen werden, z. B. Laden, Fehler, Auswählen usw. Häufig verwendete HTML-Ereignisse sind wie folgt: <strong> </strong></p> <p> </p> <p> <img alt="" src="http://files.jb51.net/file_images/article/201501/201501201527404.png">Das Ladeereignis ist eines der am häufigsten verwendeten Ereignisse, da das DOM-Framework vor dem Laden der Seite noch nicht erstellt wurde und daher keine zugehörigen Vorgänge ausgeführt werden können. </p> <p>Weisen Sie dem Fensterobjekt „load“ zu, und das Entladeereignis entspricht den Methoden „onload“ und „onunload“ des Tags <body> </p></a></span></div> </div>
