Was sind die DOM-Ereignisse von JavaScript?

Zu den

js-Dom-Ereignissen gehören: Abbruch, Nachdruck, Unschärfe, Abspielen, Ändern, Klicken, Kopieren, Ausschneiden, Doppelklick, Ziehen, Ablegen, Beendet, Fehler, Fokus, Öffnen, Laden, Abspielen usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

HTML-DOM-Ereignisse

HTML-DOM-Ereignisse ermöglichen es JavaScript, verschiedene Ereignishandler für Elemente in einem HTML-Dokument zu registrieren.

Ereignisse werden häufig in Verbindung mit Funktionen verwendet, die erst ausgeführt werden, wenn das Ereignis eintritt (z. B. wenn der Benutzer auf eine Schaltfläche klickt).

Ereignis	Beschreibung
abort	Dieses Ereignis tritt auf, wenn das Laden des Mediums abgebrochen wird.
afterprint	Dieses Ereignis tritt auf, wenn die Seite mit dem Drucken beginnt oder wenn das Druckdialogfeld geschlossen wird.
animationend	CSS Dieses Ereignis tritt auf, wenn die Animation abgeschlossen ist.
animationiteration	Tritt auf, wenn eine CSS-Animation wiederholt wird.
animationstart	Dieses Ereignis tritt ein, wenn eine CSS-Animation startet.
beforeprint	Dieses Ereignis tritt ein, wenn die Seite gedruckt werden soll.
beforeunload	Dieses Ereignis tritt unmittelbar vor dem Entladen des Dokuments auf.
Unschärfe	Dieses Ereignis tritt auf, wenn ein Element den Fokus verliert.
canplay	Dieses Ereignis tritt ein, wenn der Browser mit der Medienwiedergabe beginnen kann.
canplaythrough	Dieses Ereignis tritt auf, wenn der Browser die Medien abspielen kann, ohne die Pufferung zu stoppen.
Ändern	Dieses Ereignis tritt auf, wenn sich der Inhalt, der ausgewählte Inhalt oder der ausgewählte Status des Formularelements ändert.
Klicken	Dieses Ereignis tritt auf, wenn der Benutzer auf das Element klickt.
Kontextmenü	Dieses Ereignis tritt auf, wenn der Benutzer mit der rechten Maustaste auf ein Element klickt, um das Kontextmenü zu öffnen.
kopieren	Dieses Ereignis tritt auf, wenn der Benutzer den Inhalt eines Elements kopiert.
cut	Dieses Ereignis tritt ein, wenn der Benutzer den Inhalt eines Elements ausschneidet.
dblclick	Dieses Ereignis tritt auf, wenn der Benutzer auf ein Element doppelklickt.
Drag	Dieses Ereignis tritt auf, wenn ein Element gezogen wird.
dragend	Dieses Ereignis tritt auf, wenn der Benutzer das Ziehen des Elements abgeschlossen hat.
dragenter	Dieses Ereignis tritt ein, wenn das gezogene Element in das Ablageziel gelangt.
dragleave	Dieses Ereignis tritt auf, wenn das gezogene Element das Ablageziel verlässt.
Dragover	Dieses Ereignis tritt auf, wenn sich das gezogene Element über dem Ablageziel befindet.
dragstart	Dieses Ereignis tritt ein, wenn der Benutzer mit dem Ziehen eines Elements beginnt.
drop	Dieses Ereignis tritt auf, wenn ein gezogenes Element auf dem Drop-Ziel abgelegt wird.
Daueränderung	Dieses Ereignis tritt auf, wenn sich die Mediendauer ändert.
beendet	Dieses Ereignis tritt ein, wenn die Medien das Ende erreichen.
Fehler	Dieses Ereignis tritt auf, wenn beim Laden einer externen Datei ein Fehler auftritt.
Fokus	Dieses Ereignis tritt auf, wenn ein Element den Fokus erhält.
focusin	Dieses Ereignis tritt auf, wenn ein Element im Begriff ist, den Fokus zu gewinnen.
focusout	Dieses Ereignis tritt auf, wenn ein Element kurz davor steht, den Fokus zu verlieren.
Vollbildwechsel	Dieses Ereignis tritt auf, wenn das Element im Vollbildmodus angezeigt wird.
Vollbildfehler	Dieses Ereignis tritt auf, wenn ein Element nicht im Vollbildmodus angezeigt werden kann.
hashchange	Dieses Ereignis tritt auf, wenn sich der Ankerteil der URL ändert.
Eingabe	Dieses Ereignis tritt auf, wenn ein Element Benutzereingaben erhält.
invalid	Dieses Ereignis tritt auf, wenn das Element ungültig ist.
keydown	Dieses Ereignis tritt auf, wenn der Benutzer eine Taste drückt.
Tastendruck	Dieses Ereignis tritt auf, wenn der Benutzer eine Taste drückt.
keyup	Dieses Ereignis tritt auf, wenn der Benutzer die Taste loslässt.
load	Dieses Ereignis tritt auf, wenn das Objekt geladen wurde.
loadeddata	Dieses Ereignis tritt auf, nachdem die Mediendaten geladen wurden.
loadedmetadata	Dieses Ereignis tritt auf, wenn Metadaten (wie Größe und Dauer) geladen werden.
loadstart	Dieses Ereignis tritt auf, wenn der Browser mit der Suche nach dem angegebenen Medium beginnt.
Nachricht	Dieses Ereignis tritt ein, wenn eine Nachricht über diese Ereignisquelle empfangen wird.
mousedown	Dieses Ereignis tritt auf, wenn der Benutzer die Maustaste auf ein Element drückt.
mouseenter	Dieses Ereignis tritt auf, wenn sich der Zeiger über das Element bewegt.
mouseleave	Dieses Ereignis tritt auf, wenn sich der Zeiger aus dem Element bewegt.
mousemove	Dieses Ereignis tritt auf, wenn sich der Zeiger über das Element bewegt.
mouseout	Dieses Ereignis tritt auf, wenn der Benutzer den Mauszeiger aus einem Element oder einem darin enthaltenen untergeordneten Element heraus bewegt.
Mouseover	Dieses Ereignis tritt ein, wenn der Zeiger über ein Element oder ein darin enthaltenes untergeordnetes Element bewegt wird.
mouseup	Dieses Ereignis tritt auf, wenn der Benutzer die Maustaste auf dem Element loslässt.
offline	Dieses Ereignis tritt auf, wenn der Browser offline zu arbeiten beginnt.
online	Dieses Ereignis tritt auf, wenn der Browser online zu arbeiten beginnt.
open	Dieses Ereignis tritt auf, wenn eine Verbindung zur Ereignisquelle geöffnet wird.
pagehide	Dieses Ereignis tritt auf, wenn der Benutzer eine Seite verlässt, um zu navigieren.
pageshow	Dieses Ereignis tritt auf, wenn der Benutzer zu einer Webseite navigiert.
Einfügen	Dieses Ereignis tritt auf, wenn der Benutzer Inhalte in ein Element einfügt.
Pause	Dieses Ereignis tritt auf, wenn das Medium vom Benutzer oder programmgesteuert angehalten wird.
play	Dieses Ereignis tritt auf, wenn das Medium gestartet wurde oder nicht mehr pausiert ist.
Wiedergabe	Dieses Ereignis tritt auf, wenn die Wiedergabe des Mediums nach dem Puffern angehalten oder gestoppt wird.
popstate	Dieses Ereignis tritt auf, wenn sich der Verlauf des Fensters ändert.
progress	Dieses Ereignis tritt auf, wenn der Browser gerade Mediendaten abruft.
Ratechange	Dieses Ereignis tritt auf, wenn sich die Medienwiedergabegeschwindigkeit ändert.
reset	Dieses Ereignis tritt auf, wenn das Formular zurückgesetzt wird.
Größe ändern	Dieses Ereignis tritt auf, wenn die Größe der Dokumentansicht geändert wird.
scroll	Dieses Ereignis tritt auf, wenn die Bildlaufleiste des Bildlaufelements gescrollt wird.
Suche	Dieses Ereignis tritt auf, wenn der Benutzer etwas in das Suchfeld eingibt.
seeked	Dieses Ereignis tritt auf, wenn der Benutzer die Bewegung/den Sprung zu einer neuen Position in den Medien beendet hat.
seeking	Dieses Ereignis tritt auf, wenn der Benutzer beginnt, sich an eine neue Stelle in den Medien zu bewegen/zu springen.
select	Dieses Ereignis tritt ein, nachdem der Benutzer Text ausgewählt hat (für und ). </td> </tr> <tr> <td>show</td> <td>Dieses Ereignis tritt auf, wenn das <menu>-Element als Kontextmenü angezeigt wird . </td> </tr> <tr> <td>stalled</td> <td> Dieses Ereignis tritt auf, wenn der Browser versucht, Mediendaten abzurufen, die Daten jedoch nicht verfügbar sind. </td> </tr> <tr> <td>Speicher</td> <td>Dieses Ereignis tritt auf, wenn der Webspeicherbereich aktualisiert wird. </td> </tr> <tr> <td>submit</td> <td>Dieses Ereignis tritt auf, wenn ein Formular gesendet wird. </td> </tr> <tr> <td>suspend</td> <td>Dieses Ereignis tritt auf, wenn der Browser absichtlich keine Mediendaten abruft. </td> </tr> <tr> <td>timeupdate</td> <td>Dieses Ereignis tritt auf, wenn sich die Wiedergabeposition ändert. </td> </tr> <tr> <td>toggle</td> <td>Dieses Ereignis tritt ein, wenn der Benutzer das Element <details> öffnet oder schließt. </td> </tr> <tr> <td>touchcancel</td> <td>Dieses Ereignis tritt auf, wenn die Berührung unterbrochen wird. </td> </tr> <tr> <td>touchend</td> <td>Dieses Ereignis tritt auf, wenn der Finger vom Touchscreen entfernt wird. </td> </tr> <tr> <td>touchmove</td> <td>Dieses Ereignis tritt auf, wenn der Finger über den Bildschirm gezogen wird. </td> </tr> <tr> <td>touchstart</td> <td>Dieses Ereignis tritt auf, wenn ein Finger auf den Touchscreen gelegt wird. </td> </tr> <tr> <td>transitionend</td> <td>Dieses Ereignis tritt auf, wenn der CSS-Übergang abgeschlossen ist. </td> </tr> <tr> <td>unload</td> <td>Dieses Ereignis tritt auf, nachdem die Seite entladen wurde (für <body>). </td> </tr> <tr> <td>Lautstärkeänderung</td> <td>Dieses Ereignis tritt auf, wenn die Lautstärke des Mediums geändert wurde. </td> </tr> <tr> <td>Warten</td> <td>Dieses Ereignis tritt auf, wenn die Medien angehalten wurden, aber voraussichtlich fortgesetzt werden. </td> </tr> <tr> <td>Rad</td> <td>Dieses Ereignis tritt auf, wenn das Mausrad auf einem Element nach oben oder unten scrollt. </td> </tr> </tbody></table> <p>【Empfohlenes Lernen: <a href="https://www.php.cn/course/list/2.html" target="_blank">Javascript-Tutorial für Fortgeschrittene</a>】</p><p>Das obige ist der detaillierte Inhalt vonWas sind die DOM-Ereignisse von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Erklärung dieser Website</div> <div>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</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Heißer Artikel</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle -Lösung" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle -Lösung</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796789525.html" title="Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben" class="phpgenera_Details_mainR4_bottom_title">Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796785857.html" title="Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden" class="phpgenera_Details_mainR4_bottom_title">Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796784440.html" title="<🎜>: Dead Rails - wie man jede Herausforderung abschließt" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Dead Rails - wie man jede Herausforderung abschließt</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796784000.html" title="Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps" class="phpgenera_Details_mainR4_bottom_title">Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/article.html">Mehr anzeigen</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Heiße KI -Werkzeuge</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>KI-gestützte App zum Erstellen realistischer Aktfotos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Ausziehbilder kostenlos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>KI-Kleiderentferner</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/ai">Mehr anzeigen</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Heißer Artikel</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle -Lösung" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle -Lösung</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796789525.html" title="Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben" class="phpgenera_Details_mainR4_bottom_title">Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796785857.html" title="Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden" class="phpgenera_Details_mainR4_bottom_title">Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796784440.html" title="<🎜>: Dead Rails - wie man jede Herausforderung abschließt" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Dead Rails - wie man jede Herausforderung abschließt</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796784000.html" title="Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps" class="phpgenera_Details_mainR4_bottom_title">Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/article.html">Mehr anzeigen</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Heiße Werkzeuge</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Einfach zu bedienender und kostenloser Code-Editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 chinesische Version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 chinesische Version</h3> </a> <p>Chinesische Version, sehr einfach zu bedienen</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Senden Sie Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Senden Sie Studio 13.0.1</h3> </a> <p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visuelle Webentwicklungstools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac-Version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac-Version</h3> </a> <p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/ai">Mehr anzeigen</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Heiße Themen</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7700</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/java-tutorial" title="Java-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1640</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1393</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1287</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1230</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/faq/zt">Mehr anzeigen</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633424.html" title="So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170279609162144.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript" /> </a> <a href="https://www.php.cn/de/faq/633424.html" title="So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript" class="phphistorical_Version2_mids_title">So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 02:54 PM</span> <p class="Articlelist_txts_p">So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633480.html" title="WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170280543760094.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen" /> </a> <a href="https://www.php.cn/de/faq/633480.html" title="WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen" class="phphistorical_Version2_mids_title">WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 05:30 PM</span> <p class="Articlelist_txts_p">WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633365.html" title="Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170278617570921.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems" /> </a> <a href="https://www.php.cn/de/faq/633365.html" title="Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems" class="phphistorical_Version2_mids_title">Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 12:09 PM</span> <p class="Articlelist_txts_p">Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633311.html" title="So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170277714783917.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript" /> </a> <a href="https://www.php.cn/de/faq/633311.html" title="So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript" class="phphistorical_Version2_mids_title">So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript</a> <span class="Articlelist_txts_time">Dec 17, 2023 am 09:39 AM</span> <p class="Articlelist_txts_p">So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633476.html" title="JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170280442251580.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems" /> </a> <a href="https://www.php.cn/de/faq/633476.html" title="JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems" class="phphistorical_Version2_mids_title">JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 05:13 PM</span> <p class="Articlelist_txts_p">JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/642543.html" title="Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170444932683164.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode" /> </a> <a href="https://www.php.cn/de/faq/642543.html" title="Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode" class="phphistorical_Version2_mids_title">Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode</a> <span class="Articlelist_txts_time">Jan 05, 2024 pm 06:08 PM</span> <p class="Articlelist_txts_p">JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/686661.html" title="So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170866513431708.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery" /> </a> <a href="https://www.php.cn/de/faq/686661.html" title="So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery" class="phphistorical_Version2_mids_title">So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery</a> <span class="Articlelist_txts_time">Feb 23, 2024 pm 01:12 PM</span> <p class="Articlelist_txts_p">jQuery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung der DOM-Manipulation, Ereignisbehandlung, Animationseffekte usw. verwendet werden kann. Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir die Ereignisbindung für ausgewählte Elemente ändern müssen. In diesem Artikel wird erläutert, wie Sie mit jQuery ausgewählte Elementänderungsereignisse binden, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Dropdown-Menü mit Optionen erstellen, die Beschriftungen verwenden:</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/642230.html" title="So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170443303819225.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript" /> </a> <a href="https://www.php.cn/de/faq/642230.html" title="So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript" class="phphistorical_Version2_mids_title">So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript</a> <span class="Articlelist_txts_time">Jan 05, 2024 pm 01:37 PM</span> <p class="Articlelist_txts_p">Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert</p> </div> </div> <a href="https://www.php.cn/de/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p> </div> <div class="footermid"> <a href="https://www.php.cn/de/about/us.html">Über uns</a> <a href="https://www.php.cn/de/about/disclaimer.html">Haftungsausschluss</a> <a href="https://www.php.cn/de/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745554018"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>