Ereignisbehandlung in JavaScript

1- Javascript Events

Event ist ein Signal, dass etwas passiert ist . Sie klicken beispielweise auf einen Button oder Sie schließen den Browser ,.. Alle  DOM-Nodes  gibt diese solchen Signals ab aber es gibt die anderen Events als  DOM z.B Ihr Event schließt das Fenster des Browser.
Unten finden Sie die Liste der nützlichsten  DOM - Events:
Mouse Events:
Events Die Bezeichnung
click Das Event passiert wenn der Benutzer auf ein Element klickt .
contextmenu Das Event passiert wenn der Benutzer auf ein Element recht klickt um ein context-menu zu öffnen.
dblclick Das Event passiert wenn der Benutzer auf ein Element doppelt klickt.

mousedown Das Event passiert wenn der Benutzer einen Maus-Button auf ein Element klickt.
mouseup Das Event passiert wenn der Benutzer den ự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử.

mouseenter Das Event passiert wenn der Zeiger in ein Element bewegt.
mouseleave Das Event passiert wenn der Zeiger aus ein Element bewegt.

mousemove Das Event passiert wenn der Zeiger über ein Element bewegt.

mouseout Das Event passiert wenn der Benutzer aus ein Element  oder aus ein seiner Sub-Elements bewegt.
mouseover Das Event passiert wenn der Benutzer in ein Element oder in ein seiner Sub-Elements bewegt.
Das Event der Elemente Form.
Event die Bezeichnung
submit Wenn der Benutzer die Inhalt von <form> schickt (summit).
focus Wenn der Benutzer auf einem Element fokusiert (focus), z.B <input>.
blur Wenn der Benutzer aus einem Element geht (blur), z.B <input>.
Das Event Keyboard:
Event die Bezeichnung
keydown Das Event passiert wenn der Benutzer auf einen Keydown.
keyup Das Event passiert wenn der Benutzer einen Button freigibt.

keypress Das Event passiert wenn der Benutzer auf einen Button drückt ( die 2 Aktionen sind fertig, drücken und freigeben).
Das Events von Document.
Event Die Bezeichnung
DOMContentLoaded Wenn die Inhalt HTML geladet wird und verarbeitet . Das Modell DOM wird komplett erstellt.
Die Events CSS:
Event Die Bezeichnung
animationstart Das Event passiert wenn die Animation CSS beginnt.
animationend Das Event passiert wenn die Animation CSS fertig ist.
animationiteration Das Event passiert wenn die Animation CSS widerholt.

Die Event-Verarbeitung:

Um das Event zu verarbeiten sollen Sie mit einen Handler beifügen. Der Händler kann eine Funktion sein. Wenn das Event passiert, wird der Handler geruft zu funktionieren. Der Handler ist ein Weg zum Laufen der Kodes  Javascript , die der Aktionen des Benutzer entsprechen.
Der Handler kann in  HTML mit dem Attribut  on{event} gesetzt werden. Z.B das Event  click:

<input value="Click me" onclick="alert('Click!')" type="button">

<input value="Click me" onclick="someFunction()" type="button">
 
Das Objekt  this vertritt das Element, das das Event erzeugt.
<input value="Click me" onclick="someFunction(this)" type="button">
Wenn der Event passiert erzeugt  Javascript das Objekt  event und Sie können es als eine Wert des Parameter benutzen.
<input value="Click me" onclick="someFunction(event)" type="button">
 
Sie können zum Element eingehen, das das Event durch das Objekt  event erzeugt.
var target =  event.target;

2- Das Beispiel mit Event

Das einfache und häufig gefundene Event ist das Event, in dem der Benutzer auf ein Element klickt. Unten ist das ein einfache Beispiel. Der Benutzer klickt auf den Button  "=" um die Summe der 2 Zahlen zu rechnen.
onclick-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function doCalculate()  {
             var a = document.getElementById("a").value; // A String value
             var b = document.getElementById("b").value; // A String value

             var c = Number(a) + Number(b);

             document.getElementById("c").value = c;
         }
      </script>

   </head>
   <body>

      <h3>Click Event example</h3>

      <input id = "a" type="text" value= "100"/> <br/>
      + <br/>
      <input id = "b" type="text" value = "200"/> <br/>

      <button onclick="doCalculate()"> = </button> <br/>

      <input id = "c" type="text" value = ""/>

   </body>
</html>

 
-
Das Objekt  this ist das Element, das das Event erzeugt. Sie können das Objekt zur Event-Verarbeitung-Funktion übergeben.
this-obj-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(target)  {
             var random = Math.round(Math.random() * 100) + 200;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Event with 'this' object</h3>

      <button onclick="changeSize(this)">Click Me to Change Size</button>

   </body>
</html>
-
Wenn das Event passiert, wird ein Objekt  event durch J avascript erstellt. Es fasst die Event betreffenden Informationen um. z.b: Für das Maus-Event kann das Objekt  event die Informationen umfassen wie die Maus-Position relativ zum Browser, die Maus Position relativ zum Event erzeugenden Element .., Sie können das Objekt  event benutzen um in die Event-Verarbeitung-Funktion zu übergeben.
<input value="Click me" onclick="someFunction(event)" type="button">
mouse-events-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="mouse-events-example.js"></script>
    <style>
        .my-div {
            width: 290px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>

    <h3>Mouse Events (Enter, Move, Leave)</h3>

    <div class="my-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmousemove="mousemoveHandler(event)">
    </div>

    <h3>Mouse position</h3>
    <div style="color:red;" id="position-div">

    </div>

    <h3>Statistics</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>

</html>

 
mouse-events-example.js
var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;


function mouseleaveHandler(evt) {
    leaveCount += 1;

    showPosition(evt);
    showStatistics();
}

function mouseenterHandler(evt) {
    enterCount += 1;

    showPosition(evt);
    showStatistics();
}

function mousemoveHandler(evt) {
    moveCount += 1;

    showPosition(evt);
    showStatistics();
}




function showPosition(evt) {
    var html = "offsetX: " + evt.offsetX +"<br/>" //
               +
               "offsetY: " + evt.offsetY;

    document.getElementById("position-div").innerHTML = html;
}

function showStatistics() {
    var html =
        "enterCount:" + enterCount + "<br/>" //
        +
        "moveCount:" + moveCount + "<br/>" //
        +
        "leaveCount:" + leaveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

 
-
Sie können das das Event erzeugende Element durch das Objekt  event zugreifen.
event-obj-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(evt)  {
             var target = evt.target;

             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Access 'target' object via 'event' object</h3>

      <button onclick="changeSize(event)">Click Me to Change Size</button>

   </body>
</html>

 
-
Z.B ein Handler mit mehrer Parameters.
multi-params-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(borderColor, target, evt, bgColor)  {
             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
             target.style.borderColor = borderColor;
             target.style.backgroundColor = bgColor;
         }
      </script>

   </head>
   <body>

      <h3>A Handler has multiple parameters</h3>
      <a href="">Reset</a> <br/><br/>

      <button onclick="changeSize('red', this, event, 'green')">Click Me</button>

   </body>
</html>