suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung und Weitergabe häufig verwendeter Klickereignisse in JavaScript

Zusammenfassung und Weitergabe häufig verwendeter Klickereignisse in JavaScript

WBOY
WBOYnach vorne
2022-10-11 14:43:155988Durchsuche

Dieser Artikel vermittelt Ihnen relevantes Wissen über „JavaScript“ und stellt hauptsächlich relevante Inhalte zu häufig verwendeten Klickzeiten vor, einschließlich Onclick-Asynchronität, Synchronizität, Ereignisauslösungssequenz, Zeitregistrierung usw. Schauen wir es uns gemeinsam an, ich hoffe es wird für alle hilfreich sein.

Zusammenfassung und Weitergabe häufig verwendeter Klickereignisse in JavaScript[Verwandte Empfehlungen:

JavaScript-Video-Tutorial

, Web-Frontend]onclick-Einführung

onclick ist ein Ereignisattribut in HTML. Seine Funktion besteht darin, ein Ereignis auszulösen, wenn der Benutzer auf ein Element klickt .

onclick-Ereignis kann an jedes Element gebunden werden, z. B.

,

-Schleife in JavaScript verwendet. Zu diesem Zeitpunkt bleibt die Seite hängen , hindert Sie jedoch nicht daran, auf die Schaltfläche zu klicken.

Wenn Sie zu diesem Zeitpunkt auf die Schaltfläche klicken, erfolgt keine Antwort von der Konsole. Dies liegt daran, dass das Onclick-Ereignis asynchron ist. Wenn Sie also auf die Schaltfläche klicken, wird das Onclick-Ereignis nicht ausgelöst, sondern wartet, bis das JavaScript wird erst ausgeführt, wenn die Aufgaben im Stapel ausgeführt werden.

Synchronizität von onclick

Oben wurde gesagt, dass das onclick-Ereignis asynchron ist. Es scheint tatsächlich ein bisschen widersprüchlich zu sein, dass beide Aussagen richtig sind Der Code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById(&#39;btn&#39;).onclick = function () {
        console.log(&#39;click&#39;);
    }
    for (var i = 0; i < 10; i++) {
        console.log(i);
        if (i === 5) {
            document.getElementById(&#39;btn&#39;).click();
        }
    }
</script>
</body>
</html>

Wenn die Konsolenausgabe 5 erreicht, lösen wir manuell das Onclick-Ereignis aus. Zu diesem Zeitpunkt gibt die Konsole Click aus und gibt dann weiterhin Folgendes aus. Dies veranschaulicht die Onclick-Synchronisierung .

Wenn das Onclick-Ereignis nach Rücksprache mit den relevanten Informationen vom Benutzer manuell ausgelöst wird, ist das Onclick-Ereignis asynchron und wird in die Ereigniswarteschlange verschoben. Wenn das Onclick-Ereignis durch JavaScript-Code ausgelöst wird, dann das Onclick-Ereignis synchron ist, wird sofort ausgeführt.

Die Auslösesequenz von Onclick

Die Auslösesequenz von Onclick-Ereignissen besteht darin, zuerst zu erfassen und dann zu blasen, das heißt, das Erfassungsereignis wird zuerst ausgelöst und dann wird das Blasenereignis ausgelöst. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <button id="btn">click</button>
        </div>
    </div>
</div>
<script>
    document.getElementById(&#39;div1&#39;).onclick = function () {
        console.log(&#39;div1&#39;);
    }
    document.getElementById(&#39;div2&#39;).onclick = function () {
        console.log(&#39;div2&#39;);
    }
    document.getElementById(&#39;div3&#39;).onclick = function () {
        console.log(&#39;div3&#39;);
    }
    document.getElementById(&#39;btn&#39;).onclick = function () {
        console.log(&#39;btn&#39;);
    }
</script>
</body>
</html>

Im obigen Code binden wir onclick-Ereignisse an das

-Element und klicken dann auf das

Klicken Sie dann auf das Element

Wenn Sie auf das Element

Die Reihenfolge der Ereignisauslösung ist also onmousedown, onmouseup, onclick, ondblclick.

Wenn Sie also das Onclick-Ereignis verwenden und mehrere Ereignisse im Zusammenhang mit Maustasten binden, müssen Sie auf die Ereignisverarbeitungslogik achten, um unerwartete Probleme zu vermeiden.

Ereignisobjekt

Im Onclick-Ereignis können wir das Ereignisobjekt über den Ereignisparameter abrufen, der ereignisbezogene Informationen enthält.

Das Ereignisobjekt event ist eine Instanz von MouseEvent. Es erbt UIEvent und Event, sodass das Ereignisobjekt alle Eigenschaften und Methoden von UIEvent und Event enthält.

MouseEvent-Eigenschaften:

MouseEvent-Methoden:

getModifierState(): Gibt einen booleschen Wert zurück, der angibt, ob die angegebene Taste gedrückt wird.

Zusammenfassung und Weitergabe häufig verwendeter Klickereignisse in JavaScript

initMouseEvent(): Initialisiert das Ereignisobjekt.

  • preventDefault(): Standardverhalten zur Verhinderung von Ereignissen.

  • stopImmediatePropagation(): Verhindert, dass Ereignisse nach oben sprudeln, und verhindert die weitere Erfassung oder Sprudelung von Ereignissen.

  • stopPropagation(): Verhindert, dass Ereignisse sprudeln.

  • So registrieren Sie Klickereignisse

    • Klickereignisse können über das onclick-Attribut, die addEventListener()-Methode und die attachmentEvent()-Methode registriert werden.

    • onclick-Attribut

onclick-Attribut ist ein Attribut von Element. Sein Wert ist eine Funktion. Wenn das Klickereignis ausgelöst wird, wird diese Funktion ausgeführt. 

<button onclick="console.log(&#39;click&#39;)">click</button>

addEventListener()

addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。

<button id="btn">click</button>
<script>
  var btn = document.getElementById(&#39;btn&#39;);
  btn.addEventListener(&#39;click&#39;, function() {
    console.log(&#39;click&#39;);
  });
</script>

attachEvent()

attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。

<button id="btn">click</button>
<script>
  var btn = document.getElementById(&#39;btn&#39;);
  btn.attachEvent(&#39;onclick&#39;, function() {
    console.log(&#39;click&#39;);
  });
</script>

结语

click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

【相关推荐：JavaScript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonZusammenfassung und Weitergabe häufig verwendeter Klickereignisse in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.im. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：[Front-End-Grundlagen] 16 praktische Tools/Website-SharingNächster Artikel：[Front-End-Grundlagen] 16 praktische Tools/Website-Sharing

In Verbindung stehende Artikel

Mehr sehen