codestory

Ereignisbehandlung in JavaScript

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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:
EventsDie Bezeichnung
clickDas Event passiert wenn der Benutzer auf ein Element klickt .
contextmenuDas Event passiert wenn der Benutzer auf ein Element recht klickt um ein context-menu zu öffnen.
dblclickDas Event passiert wenn der Benutzer auf ein Element doppelt klickt.

mousedownDas Event passiert wenn der Benutzer einen Maus-Button auf ein Element klickt.
mouseupDas 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ử.

mouseenterDas Event passiert wenn der Zeiger in ein Element bewegt.
mouseleaveDas Event passiert wenn der Zeiger aus ein Element bewegt.

mousemoveDas Event passiert wenn der Zeiger über ein Element bewegt.

mouseoutDas Event passiert wenn der Benutzer aus ein Element  oder aus ein seiner Sub-Elements bewegt.
mouseoverDas Event passiert wenn der Benutzer in ein Element oder in ein seiner Sub-Elements bewegt.
Das Event der Elemente Form.
Eventdie Bezeichnung
submitWenn der Benutzer die Inhalt von <form> schickt (summit).
focusWenn der Benutzer auf einem Element fokusiert (focus), z.B <input>.
blurWenn der Benutzer aus einem Element geht (blur), z.B <input>.
Das Event Keyboard:
Eventdie Bezeichnung
keydownDas Event passiert wenn der Benutzer auf einen Keydown.
keyupDas Event passiert wenn der Benutzer einen Button freigibt.

keypressDas Event passiert wenn der Benutzer auf einen Button drückt ( die 2 Aktionen sind fertig, drücken und freigeben).
Das Events von Document.
EventDie Bezeichnung
DOMContentLoadedWenn die Inhalt HTML geladet wird und verarbeitet . Das Modell DOM wird komplett erstellt.
Die Events CSS:
EventDie Bezeichnung
animationstartDas Event passiert wenn die Animation CSS beginnt.
animationendDas Event passiert wenn die Animation CSS fertig ist.
animationiterationDas 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 Javascript 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>

 

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.