So verwenden Sie die JS-Ereignisbindung und das Ereignisflussmodell
Dieses Mal zeige ich Ihnen, wie Sie die JS-Ereignisbindung und das Ereignisflussmodell verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JS-Ereignisbindungs- und Ereignisflussmodells? .
1. JS-Ereignisse
(1) JS-Ereignisklassifizierung1 ：
click/dbclick/mouseover/mouseout
2.HTML-Ereignis:
onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll
3. Tastaturereignisse:
Tastendruck: wird ausgelöst, wenn die Tastatur gedrückt wird.
Tastendruck: wird ausgelöst, wenn die Tastatur gedrückt und angehoben wird. Tastendruck: Auslösen, wenn die Tastatur angehoben wird
[Notizen]
①Ausführungssequenz: Tastendruck Tastendruck Tastendruck
②Tastendruck kann nur Zahlen, Buchstaben und Symboltasten erfassen, nicht jedoch Funktionstasten.③Taste nach unten wechseln – Tastendruck bei langem Drücken
④Taste nach unten muss nicht unbedingt nach oben gedrückt werden. Bei langem Drücken geht der Fokus verloren und die Taste nach oben wird nicht mehr ausgelöst.
⑤Bei Tastendruck wird die Groß-/Kleinschreibung beachtet, bei Tastendruck und Kewup gilt dies nicht anders.
4. Ereignisfaktor:
Wenn ein Ereignis ausgelöst wird, übergibt das Ereignis standardmäßig einen Parameter an die vom Ereignis aufgerufene Funktion.
Dieser Parameter ist ein Ereignis Faktoren enthalten verschiedene detaillierte Informationen zum Ereignis.
document.onkeydown=function(e){
console.log(e);
}
document.onkeydown=function(){
console.log(window.event);
}①In der Neustartfunktion erhalten Sie den Ereignisfaktor e.
② Mit e.key können Sie direkt zum gedrückten Tastenzeichen wechseln (nicht empfohlen).③Sie können keyCode/which/charCode verwenden, um den ASCII-Codewert des Schlüssels abzurufen.
(Schreiben kompatibel mit verschiedenen Browsern)
//兼容浏览器的写法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}2. EreignisBindungsmodell ( 1) DOM0-Ereignismodell
Bindungshinweise:
①Verwenden Sie window.onload zum Binden, nachdem der Ladevorgang abgeschlossen ist.
window.onload =function(){//事件}② Legen Sie es zum Binden hinter den Körper.
var Code=e.keyCode||e.which||e.charCode;
//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}
if(e.keyCode==13){
isEnt=1;
}
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}1. Inline-Modell (Inline-Bindung): Verwenden Sie den Funktionsnamen direkt als Attributwert des Attributs im HTML-Tag.
//body内容 <body> <button onclick="func()">内联模型绑定</button> <button id="btn1">哈哈哈哈</button> <button id="btn2">DOM2模型绑定</button> <button id="btn3">取消DOM2</button> </body>
Nachteile: Es entspricht nicht den grundlegenden Vorgaben des W3C zur Trennung von Inhalt und Verhalten.
2. Skriptmodell (dynamische Bindung): Wählen Sie einen Knoten in JS aus und fügen Sie dann das Onclick-Attribut zum Knoten hinzu.
<button onclick="func()">内联模型绑定</button>
Vorteile: Es entspricht den grundlegenden Spezifikationen des W3C zur Trennung von Inhalt und Verhalten und realisiert die Trennung von HTML und JS.
Nachteile: Derselbe Knoten kann Ereignisse desselben Typs nur einmal hinzufügen. Bei mehrmaligem Hinzufügen wird das letzte wirksam.document.getElementById("btn1")=function(){}3.DOM0 weist einen allgemeinen Mangel auf: Ereignisse, die über DOM0 gebunden sind, können nach der Bindung nicht abgebrochen werden.
document.getElementById("btn1").onclick=function(){
alert(1234);
}
document.getElementById("btn1").onclick=function(){
alert(234);
}//重复的只能出现最近的一次(2) DOM2-Ereignismodell
1. DOM2-Ereignisbindung hinzufügen:
①Vor IE8 verwenden Sie .attachEvent("onclick", function);
②Nachher IE8, verwenden Sie .addEventListener("click", function, true/false); Parameter drei: false (Standard) bedeutet Ereignissprudeln, die Übergabe von true bedeutet Ereigniserfassung.
③Kompatibel mit allen Browser-Verarbeitungsmethoden:
document.getElementById("btn3").onclick=function(){//不能取消匿名函数
if(btn.detachEvent){
btn.detachEvent("onclick",func1);
}else{
btn.removeEventListener("click",func1);
}
alert("取消DOM2");
}2. Vorteile der DOM2-Bindung:
①Derselbe Knoten kann mit DOM2 an mehrere Ereignisse desselben Typs gebunden werden.
②Mit DOM2 gebundene Ereignisse können mit speziellen Funktionen abgebrochen werden.3. Ereignisbindung abbrechen:
① Verwenden Sie attachmentEvent-Bindung und detachevent zum Abbrechen.
②Verwenden Sie attachmentEventListener zum Binden und RemoveEventListenter zum Abbrechen.
Hinweis: Wenn das an DOM2 gebundene Ereignis beim Binden des Ereignisses abgebrochen werden muss, muss die
Rückruffunktion
ein Funktionsname sein, und darf keine anonyme Funktion sein, da das Ereignis auftritt Wenn die Rückruffunktion abgebrochen wird, geben Sie den Namen der abzubrechenden Funktion ein.
3. JS-Ereignisflussmodell (1) Ereignisflussmodell in JS
1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
② 除此之外的所有事件绑定均为事件冒泡。
4. 阻止事件冒泡：
① IE10之前，e.cancelBubble = true;
② IE10之后，e.stopPropagation();
5. 阻止默认事件：
① IE10之前：e.returnValue = false;
② IE10之后：e.preventDefault();
//css
#p1{
width: 300px;;
height: 300px;
background-color: powderblue;
}
#p2{
width: 200px;
height: 200px;
background-color: deeppink;
}
#p3{
width: 100px;
height: 100px;
background-color:#A9A9A9;
}
//html
<p id="p1">
<p id="p2">
<p id="p3"></p>
</p>
</p>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
p1.addEventListener("click",function(){
console.log("p1 click");
},false);
p2.addEventListener("click",function(){
console.log("p2 click");
},false);
p3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("p3 click");
},false);结果（事件冒泡）（由小到大p3-》p2-》p1）：
p1.addEventListener("click",function(){
console.log("p1 click");
},true);
p2.addEventListener("click",function(){
console.log("p2 click");
},true);
p3.addEventListener("click",function(){
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("p3 click");
},true);结果(事件捕获)（由小到大p3-》p2-》p1）：
//依然遵循事件冒泡
document.onclick=function(){
console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后
} else {
e.cancelBubble = true; //IE10之前
}
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后
} else {
e.cancelBubble = true; //IE10之前
}
}
//阻止默认事件
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE10之后
} else {
e.returnValue = false; //IE10之前
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die JS-Ereignisbindung und das Ereignisflussmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden?
Apr 26, 2024 am 09:40 AM
MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden
Wie binde ich ein Unterkonto auf Xiaohongshu? Wie prüft es, ob das Konto normal ist?
Mar 21, 2024 pm 10:11 PM
Im heutigen Zeitalter der Informationsexplosion wird der Aufbau einer persönlichen Marke und eines Unternehmensimages immer wichtiger. Als führende Fashion-Life-Sharing-Plattform in China hat Xiaohongshu die Aufmerksamkeit und Beteiligung vieler Nutzer auf sich gezogen. Für diejenigen Nutzer, die ihren Einfluss erweitern und die Effizienz der Inhaltsverbreitung verbessern möchten, ist die Bindung von Unterkonten ein wirksames Mittel geworden. Wie bindet Xiaohongshu also ein Unterkonto? Wie kann ich überprüfen, ob das Konto normal ist? Dieser Artikel beantwortet diese Fragen ausführlich für Sie. 1. Wie binde ich ein Unterkonto auf Xiaohongshu? 1. Melden Sie sich bei Ihrem Hauptkonto an: Zuerst müssen Sie sich bei Ihrem Xiaohongshu-Hauptkonto anmelden. 2. Öffnen Sie das Einstellungsmenü: Klicken Sie oben rechts auf „Ich“ und wählen Sie dann „Einstellungen“. 3. Geben Sie die Kontoverwaltung ein: Suchen Sie im Einstellungsmenü nach der Option „Kontoverwaltung“ oder „Kontoassistent“ und klicken Sie darauf
Schritte und Methoden, um Douyin in Toutiao zu binden
Mar 22, 2024 pm 05:56 PM
1. Öffnen Sie Toutiao. 2. Klicken Sie unten rechts auf „Mein“. 3. Klicken Sie auf [Systemeinstellungen]. 4. Klicken Sie auf [Konto- und Datenschutzeinstellungen]. 5. Klicken Sie auf die Schaltfläche auf der rechten Seite von [Douyin], um Douyin zu binden.
Wie binde ich die Cainiao-App an Pinduoduo? Wie füge ich den Cainiao Wrap zur Pinduoduo-Plattform hinzu?
Mar 19, 2024 pm 02:30 PM
Die Cainiao-App ist eine Plattform, die Ihnen verschiedene Logistikinformationen liefern kann. Die Funktionen hier sind sehr leistungsstark und einfach zu verwenden. Wenn Sie logistische Probleme haben, können diese auf jeden Fall gelöst werden -Stopp-Service kann alles rechtzeitig lösen, die Expresslieferung abholen, versenden usw. Wir haben mit verschiedenen Plattformen zusammengearbeitet und können manchmal abgefragt werden Es kann vorkommen, dass die auf Pinduoduo gekauften Waren keine Logistikinformationen anzeigen können. Um dies zu erreichen, müssen Sie die spezifischen Methoden unten klären, und jeder kann einen Blick darauf werfen. So binden Sie Cainiao an ein Pinduoduo-Konto: 1. Öffnen Sie die Cainiao-App und gehen Sie zur Hauptseite
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
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
So binden Sie die Cainiao-APP an Pinduoduo. So binden Sie die Cainiao-APP an Pinduoduo
Mar 19, 2024 pm 05:16 PM
Wissen Sie, wie Sie Pinduoduo binden, wenn Sie Cainiao Wrap verwenden? Die offizielle Version der Cainiao Wrap-App synchronisiert einige Logistikinformationen von Pinduoduo nicht automatisch auf dieser Plattform. Sie können lediglich die Bestellnummer kopieren oder Ihr Mobiltelefon überprüfen wenn es Expressversandinformationen gibt. Natürlich müssen diese alle manuell ausgefüllt werden. Wenn Sie mehr wissen möchten, schauen Sie sich den Editor an. So binden Sie die Cainiao-APP an Pinduoduo 1. Öffnen Sie die Cainiao-APP und klicken Sie auf „Paketanleitung“ in der oberen linken Ecke der Hauptseite. 2. In der Benutzeroberfläche gibt es viele Shopping-Websites und Konten können gebunden werden. 3. Klicken Sie, um andere E-Commerce-Plattformen zu importieren. 4. Benutzerautorisierung: Klicken Sie auf Pinduoduo, um zur Benutzeroberfläche zu gelangen
So binden Sie die Xiaomi-Auto-App an das Ladesäulengerät
Apr 01, 2024 pm 06:52 PM
Das neueste von Xiaomi auf den Markt gebrachte Modellauto Mi su7 hat verschiedene heiße Suchlisten dominiert. Viele Benutzer, die zufällig ein Auto kaufen möchten, haben sich für den Kauf eines Modellautos Xiaomi su7 entschieden Wenn Sie sich dazu entschließen, eine Ladesäule zu Hause zum Aufladen zu verwenden, wird Ihnen dieses Tutorial eine ausführliche Einführung geben. Ich hoffe, es kann Ihnen helfen. Zuerst öffnen wir die mobile Xiaomi-App, klicken auf die Schaltfläche „Mein“ in der unteren rechten Ecke und sehen dann in der Benutzeroberfläche „Mein“ die Option „Heimladestapel“. Klicken Sie nach dem Aufrufen der Seite, die den Ladestapel bindet, auf den Scancode Klicken Sie unten auf die Schaltfläche und scannen Sie den QR-Code auf der Ladesäule. Mit dem QR-Code können Sie die Ladesäule an die App binden.
Was soll ich tun, wenn meine kleine Blackbox nicht an Steam gebunden werden kann?
Mar 12, 2024 pm 03:10 PM
Dass die Black Box keine Verbindung zu Steam herstellen kann, kann durch Netzwerk- oder Softwareversionsprobleme verursacht werden. Die kleine Blackbox bietet Informationen, darunter Preise für veröffentlichte und kommende Spiele, Anforderungen und Rezensionen zur Computerkonfiguration sowie eine ausführliche Gameplay-Analyse. Darüber hinaus können Benutzer jederzeit und überall die benötigten Informationen über mobile Geräte finden. Was tun, wenn die kleine Blackbox nicht mit Steam verbunden werden kann? 1. Bestätigen Sie den Netzwerkstatus und stellen Sie sicher, dass das Gerät mit dem Internet verbunden ist. 2. Überprüfen Sie die Little Black Box-Version. Stellen Sie sicher, dass Sie die neueste Version der Little Black Box-Software verwenden, und versuchen Sie, Ihr Steam-Konto zu binden. 3. Um die Steam-Kontoeinstellungen zu überprüfen, melden Sie sich bitte beim Steam-Konto an und prüfen Sie, ob die Funktion zur Bindung von Drittanbietersoftware in den Datenschutzeinstellungen aktiviert ist. 4. Wenden Sie sich an den offiziellen Kundendienst. Wenn das Problem mit den oben genannten Schritten immer noch nicht gelöst werden kann, wird empfohlen, dass Sie sich an den offiziellen Kundendienst wenden, um Hilfe zu erhalten.
