Ereignisbehandlung in JavaScript

Javascript Events
Das Beispiel mit Event

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 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>

Ereignisbehandlung in JavaScript

1. Javascript Events

2. Das Beispiel mit Event

Anleitungen ECMAScript, Javascript

Anleitungen ECMAScript, Javascript

Neueste Artikel