suchen

Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel der Eigenschaften des jQuery-Ereignisobjekts

Detailliertes Beispiel der Eigenschaften des jQuery-Ereignisobjekts

小云云
小云云Original
2017-12-29 09:56:041304Durchsuche

In diesem Artikel werden hauptsächlich die Eigenschaften und Methoden des jQuery-Ereignisobjekts vorgestellt. Ich hoffe, dass er Ihnen weiterhelfen kann.

Die Eigenschaften und Methoden von jQuery-Ereignisobjekten dienen als Referenz. Der spezifische Inhalt lautet wie folgt:

Es gibt viele Attribute und Methoden von Ereignisobjekten, aber nur wenige das wir oft verwenden, hier spreche ich hauptsächlich über die Funktionen und Unterschiede

event.type: Ermitteln Sie die Art des Ereignisses

Der Ereignistyp des auslösenden Elements

$("a").click(function(event) {
 alert(event.type); // "click"事件
});

event.pageX und event.pageY: Holen Sie sich die aktuellen Koordinaten der Maus relativ zur Seite

Mit diesen beiden Attributen können Sie den Koordinatenwert des Elements auf der aktuellen Seite und den Abstand zwischen der Position bestimmen der Maus relativ zum linken Rand des Dokuments (links) und (oben), einfach. Im Allgemeinen beginnt es in der oberen linken Ecke der Seite, das heißt, es verwendet die Seite als Referenzpunkt und ändert sich nicht mit die Bewegung des Schiebereglers

event.preventDefault()-Methode: Verhindern Sie das Standardverhalten

Dies wird häufig verwendet. Wenn Sie nach dem Ausführen dieser Methode auf einen Link (ein Tag) klicken, wird die Der Browser springt nicht zur neuen URL. Wir können event.isDefaultPrevented() verwenden, um festzustellen, ob diese Methode (für dieses Ereignisobjekt) aufgerufen wurde.

event.stopPropagation()-Methode: Es ist möglich, das Bubbling von Ereignissen

Events Bubbling zu verhindern , um zu verhindern, dass Ereignisse im DOM-Baum aufsteigen, d 🎜>event.which normalisiert event.keyCode und event.charCode. event.which normalisiert auch Tastendrücke (Mousedown- und Mouseup-Ereignisse), wobei die linke Taste 1, die mittlere Taste 2 und die rechte Taste 3 meldet

event.currentTarget: das aktuelle DOM-Element während der Ereignissprudelung

Das DOM-Objekt, das derzeit das Ereignis auslöst, bevor es sprudelt, entspricht diesem.

Der Unterschied zwischen diesem und event.target:

Ereignisse in js werden sprudeln. Dies kann sich also ändern. aber event.target wird sich nicht ändern. Es wird immer das Ziel-DOM-Element sein, das das Ereignis direkt akzeptiert.

.this und event.target sind beide DOM-Objekte

Wenn Sie möchten, können sie es sein mithilfe von Methoden in jquey in Jquery-Objekte konvertiert. Zum Beispiel die Verwendung von this und $(this), die Verwendung von event.target und $(event.target);

Referenzcode: 


<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
  .left p,
  .right p {
    width: 500px;
    height: 100px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left p {
    background: #bbffaa;
  }
  
  .right p {
    background: yellow;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h3>事件对象的属性与方法</h3>
  <p class="left">
    <p id="content">
      外层p元素
      <br />
      <span style="background: silver;">内层span元素</span>
      <br /> 外层p元素
    </p>
    <br />
    <p id="msg"></p>
  </p>
  <script type="text/javascript">
  //为 <span> 元素绑定 click 事件 
  $("span").click(function() {
    $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
  });
  //为 Id 为 content 的 <p> 元素绑定 click 事件 
  $("#content").click(function(event) {
    $("#msg").html($("#msg").html() + "<p>外层p元素被单击</p>");
    event.stopPropagation(); //阻止事件冒泡 
  });
  //为 <body> 元素绑定 click 事件 
  $("body").click(function() {
    $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
  });
  </script>
</body>

</html>
Klicken Sie auf die Spanne, um zum Klickereignis des Inhalts zu sprudeln, und geben Sie dann die Klickfunktion des Inhalts ein, um die Anweisung „Bubbling verhindern“ auszuführen, die nicht zum Körper, also zum Körperelement, sprudelt wird nicht angeklickt, wenn Sie auf die Spanne klicken.

$('#msg').html($('#msg').html()+ "

Das innere Span-Element wurde angeklickt

" // Anhängen

$('#msg').html("

Das innere Span-Element wurde angeklickt

"); //Ersetzen Sie den ursprünglichen Inhalt

Verwandte Empfehlungen:


Js-Betrieb von Nicht-IE-Ereignisobjekteigenschaften, detaillierte Einführung in Methoden

JavaScript-Dom-Ereignisobjekt und IE-Ereignisobjektinstanz Ausführliche Erklärung

JavaScript-Ereignisobjektimplementierung_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel der Eigenschaften des jQuery-Ereignisobjekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der Methoden zur Verwendung von JQuery zum Betreiben von übergeordneten und untergeordneten Iframe-SeitenNächster Artikel：Zusammenfassung der Methoden zur Verwendung von JQuery zum Betreiben von übergeordneten und untergeordneten Iframe-Seiten

In Verbindung stehende Artikel

Mehr sehen