Heim > Artikel > Web-Frontend > Detaillierte Beschreibung von JQuery-Ereignissen und Bindungsereignissen
Detaillierte Beschreibung von JQuery-Ereignissen und Bindungsereignissen
- 小云云Original
- 2018-01-22 13:39:352251Durchsuche
JQuery-Ereignisse und Bindungsereignisse sind beide sehr wichtige Kenntnisse. In diesem Artikel werden hauptsächlich die relevanten Kenntnisse über JQuery-Ereignisse und Bindungsereignisse vorgestellt, die einen guten Referenzwert haben. Werfen wir einen Blick mit dem folgenden Editor. Ich hoffe, er kann allen helfen.
1. Werfen wir zunächst einen Blick auf die häufig verwendeten Methoden zum Hinzufügen von Ereignissen:
<input type="button" id="btn" value="click me!" onclick="shao();" />
<script type="text/javascript">
function shao() {
alert("msg is showing!");
}
</script>
Die häufigste Methode zum Hinzufügen von Ereignissen ist das Hinzufügen des Elementattributs onclick Das Element.
Der Nachteil dieser Methode ist:
kann nur für eine Ereignisverarbeitungsfunktion verwendet werden. Die Methode zum Abrufen des Ereignisobjekts ist unterschiedlich.
Im jQuery-Ereignis
ready-Ereignis:
Wenn die Seite geladen ist, führen Sie die Funktion aus:
<script>
$(document).ready(function(e){
alert(document.getElementById("aa").innerHTML);
//若是要写function方法，不可以在里面写
})
//要在外面写
</script>
Diese Methode kann überall dort aufgerufen werden, wo Sie schreiben it;
Mausereignisse:
<script>
$("#aa").click(function(){
alert("点击事件");
})
$("#aa").dblclick(function(){
alert("双击事件");
})
$("#aa").mouseover(function(){
alert("鼠标移上")
});
$("#aa").mouseout(function(){
alert("鼠标离开");
})
$("#aa").mousemove(function(){
alert("鼠标移动");
})
$("#aa").mouseup(function(){
alert("鼠标抬起");
})
$("#aa").mousedown(function(){
alert("鼠标按下");
})
键盘按键按下:给id加没有作用,需要给整个页面加所以用$(document)
$(document).KeyEvent(function(){
alert("鼠标离开");
})
</script>
Formularelementereignisse:
<script>
$("#shao").focus(function(){
alert("获得焦点");
})
$("#shao").blur(function(){
alert("失去焦点");
})
$("#shao").change(function(){
alert("值发生变化，change事件");
})
$("#shao").keydown(function(){
alert("键盘按下");
})
</script>
2. Bindungsereignisse (hängende Ereignisse):
Sie können Schaltflächenereignisse dynamisch ändern ;
Was ist dynamische Bindung?
Dynamische Bindung bezieht sich auf dynamisch hinzugefügte DOM-Knoten oder HTML-Elemente, die bei der ersten Ausführung nicht vorhanden sind. Wenn Sie diesen dynamisch hinzugefügten Knoten Ereignisse hinzufügen möchten, müssen Sie die on-Methode von jquery verwenden, um die Ereignisse zu binden.
bind() fügt dem passenden Element einen oder mehrere Event-Handler hinzu.
Verwendung:
$(selector).bind(event,data,function)
Hinweis: Die bind()-Funktion kann nur Ereignisse für vorhandene Elemente verarbeiten. Legen Sie die
Code: Schreiben Sie zuerst zwei Schaltflächen:
<body> <p id="aa" style="width: 100px; height: 100px; background-color: blueviolet;">hello</p> <!--<input type="text" id="shao" />--> <input type="button" id="btn1" value="挂事件" /> <input type="button" id="btn2" value="移除事件" /> </body>
Betätigen Sie zuerst das Click-and-Hang-Ereignis:
<script>
//挂事件，
$("#btn1").click(function(){
//点击挂事件，给p绑定一个事件：
$("#aa").bind("click",function(){
//bind绑定事件
alert("点击");
});
//括号里两个参数，第一个是事件类型（事件名称），第二个参数是要执行的代码
})
</script>
In diesem Fall klicken Sie auf das Click-and-Hang-Ereignis:
Schaltfläche zum Entfernen des Ereignisses:
<script>
//移除事件；
$("#aa").click(function(){
//点击移除事件；把p里面的事件移除掉
$("#aa").unbind("click");
//unbind移除绑定，填一个参数，要移除哪个事件
})
</script>
Klicken Sie zum Entfernen, klicken Sie auf das Ereignis, um es abzubrechen
Ereignisdaten
Allgemeine Ereignisse umfassen Ereignisquelle und Zeitdaten:
Ereignisdaten: Zum Zeitpunkt der Abreise werden die Daten übergeben
JS ist vereinfacht, Sie müssen die nicht schreiben Ereignisquelle, weil Sie sie bekommen können
4. JSON-Syntax:
JSON-Struktur:
Json ist einfach ein Objekt und ein Array in JavaScript, also sind es diese beiden Strukturen Objekte und Arrays Diese beiden Strukturen können eine Vielzahl komplexer Strukturen darstellen.
(1) Objekt: Das Objekt wird in js als von „{}“ umschlossener Inhalt dargestellt und die Datenstruktur ist die Schlüssel-Wert-Paarstruktur von {Schlüssel: Wert, Schlüssel: Wert, ... .} In objektorientierten Sprachen ist der Schlüssel das Attribut des Objekts und der Wert der entsprechende Attributwert. Daher ist es leicht zu verstehen, dass die Wertmethode object.key ist, um den Attributwert zu erhalten Der Attributwert kann eine Zahl, eine Zeichenfolge, ein Array oder ein Objekt verschiedener Art sein.
(2) Array: Das Array in js ist der in eckige Klammern eingeschlossene Inhalt „[]“. Die Datenstruktur ist [„java“, „javascript“, „vb“, ...] und die value ist die gleiche Methode wie in allen Sprachen, wobei die Indexerfassung verwendet wird. Der Feldwerttyp kann Zahlen, Zeichenfolgen, Arrays oder Objekte sein.
Komplexe Datenstrukturen können durch die beiden Strukturen von Objekten und Arrays kombiniert werden.
json ist ein leichtes Datenaustauschformat
Vollständige Schreibweise:
JavaScript Object Notation
Definitionssyntax:
var j = {
"one":"111111",
"two":"22222"
}; Wert Methode:
Index:
//数组的取值方式： alert(j["one"]);//直接取索引的方法
Punktsyntax:
//点语法： alert(j.one);
JSON kann auch ein zweidimensionales Array sein:
var j = {
"one":"111111",
"two":"22222",
"three":{"aa":"33333"},
};
//数组的取值方式：
//alert(j["one"]);//直接取索引的方法
//点语法：
alert(j.one);
alert(j.three.aa);
JSON-Daten durchqueren:
//遍历
for(var v in j)
{
//定义一个变量v，把j拿到v里面，关键字不是”as“了，是”in“，
alert(v);
// 这样便利的是索引
alert(j[v]);
// 这样是根据索引来取值
}
json hat kein Längenattribut, daher ist die for-Schleife nicht für json geeignet
, aber for-in ist auch für Arrays geeignet
Verwandte Empfehlungen;
Detaillierte Beispiele der Eigenschaften von jQuery-Ereignisobjekten
Der Unterschied zwischen Mouseover und MouseEnter in jQuery-Ereignissen
Worauf sollten Sie achten, wenn Sie on zum Binden von Ereignissen in jQuery verwenden?
Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung von JQuery-Ereignissen und Bindungsereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!