Heim > Web-Frontend > Front-End-Fragen und Antworten > Was sind die grundlegenden Ereignismethoden in JQuery?

Was sind die grundlegenden Ereignismethoden in JQuery?

青灯夜游
Freigeben: 2022-05-25 16:53:21
Original
2602 Leute haben es durchsucht

Grundlegende Ereignismethoden: 1. click(), Mausklick-Ereignis festlegen; 2. dblclick(), Maus-Doppelklick-Ereignis festlegen; 4. focus(), Setzen Sie das Trigger-Fokus-Ereignis; 5. Blur(), legen Sie das Fokus-Verlust-Ereignis fest; 6. Mousedown() usw.

Was sind die grundlegenden Ereignismethoden in JQuery?

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Ereignismethode löst eine Funktion aus oder fügt dem Ereignishandler des ausgewählten Elements eine Funktion hinzu.

In der folgenden Tabelle sind einige jQuery-Methoden zur Verarbeitung von Ereignissen aufgeführt.

In Version 1.9 entfernt. Fügen Sie einen oder mehrere Event-Handler zum aktuellen oder zukünftigen ausgewählten Element hinzu.Mousedown-Ereignis hinzufügen/auslösen. )Mousemove-Ereignis hinzufügen/auslösenMouseout-Ereignis hinzufügen/auslösenHinzufügen/tri gger Mouseover-Ereignisse Mouseup-Ereignisse hinzufügen/auslösenÜber die on()-Methode hinzugefügte Ereignishandler entfernenEreignisbehandlung zu Elementen hinzufügen Prozedur fügt dem ausgewählten Element einen oder mehrere Event-Handler hinzu. Dieser Handler kann nur einmal pro Element ausgelöst werden Gibt eine Funktion an, die ausgeführt werden soll, wenn das DOM vollständig geladen ist In Version 1.9 entfernt. trigger()unbind()Entferne den hinzugefügten Event-Handler aus dem ausgewählten Element undelegate()Entferne den Event-Handler aus dem aktuellen oder zukünftigen ausgewählten Element Programm
Methode Beschreibung
bind() Ereignishandler zum Element hinzufügen
blur() Ereignis für Fokusverlust hinzufügen/auslösen
change() Hinzufügen/Auslöser Ereignis ändern
click() Klickereignis hinzufügen/auslösen
dblclick() Doppelklickereignis hinzufügen/auslösen
die() In Version 1.9 entfernt. Entfernen Sie alle über die live()-Methode hinzugefügten Event-Handler.
focus() Fokus-Ereignis hinzufügen/auslösen Event-Handler zum Focusout-Ereignis
hover() Fügen Sie zwei Event-Handler zum Hover-Ereignis hinzu
keydown() Keydown-Ereignis hinzufügen/auslösen
keypress() Tastendruck-Ereignis hinzufügen/auslösen
keyup() Keyup-Ereignis hinzufügen/auslösen
live()
mousedown()
Mouseleave-Ereignis hinzufügen/auslösen mousemove()
mouseout()
mouseover()
mouseup()
off()
on()
one()
ready()
toggle()
Fügen Sie zwei oder mehr Funktionen hinzu, um zwischen Klickereignissen zu wechseln.
Alle an das ausgewählte Element gebundenen Ereignisse auslösen

Anweisungen:

1. Die obige Ereignisfunktion hat drei Verwendungszwecke:

//直接绑定事件到元素上
$('.target1').keydown(function(e) {
    $("em:first").text(e.target.value)    //通过对象e获取输入的值
});
 
//传递参数调用函数处理
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 通过e传递参数数据
});
 
//手动触发已绑定的点击事件
$elem.click()
Nach dem Login kopieren

2 Der Unterschied zwischen Mouseover und MouseEnter: Unabhängig davon, ob der Mauszeiger über das ausgewählte Element oder seine Unterelemente fährt, wird das Mouseover-Ereignis ausgeführt ausgelöst werden, was als Unterstützung für Bubbles Processing bezeichnet wird. Die Bubbling-Verarbeitung bezieht sich auf Ereignisse, die durch das untergeordnete Element und das übergeordnete Element gemeinsam definiert werden. Wenn das untergeordnete Element ausgelöst wird oder das untergeordnete Element nicht definiert ist, wird das Ereignis weitergegeben das übergeordnete Ereignis, wodurch das übergeordnete Ereignis ausgelöst wird. Das Mouseenter-Ereignis wird nur ausgelöst, wenn der Mauszeiger über das ausgewählte Element bewegt wird.

3. Das Formularelement verfügt über ein Standardverhalten beim Absenden des Formulars. Wenn es über „Senden“ verarbeitet wird, muss dieses Standardverhalten des Browsers deaktiviert werden. Der herkömmliche Weg besteht darin, das Ereignisobjekt e.preventDefault() aufzurufen, um es zu verarbeiten. In jQuery können Sie am Ende der Funktion direkt false zurückgeben.

    //回车键或者点击提交表单后禁止浏览器默认跳转:
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });
Nach dem Login kopieren

4. Verwenden Sie on()

Grundlegende Verwendung: .on(events,[selector],[data])

Die häufigste Methode besteht darin, ein Klickereignis an ein Element zu binden. Vergleichen Sie den Unterschied zwischen der Verknüpfungsmethode und die on-Methode

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

//多个事件绑定同一个函数,通过空格分离,传递不同的事件名,可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });

//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){}, 
    mouseout:function(){}
});

//将数据传递到处理程序
$( "button" ).on( "click", {    //第二个参数传递数据给函数调用
  name: "Mr.Tory"
}, greet );
function greet( event ) {
  alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}
Nach dem Login kopieren

Eigenschaften und Methoden des Ereignisobjekts

.whichGib an, welche Taste oder Taste gedrückt wurde .timeStampDiese Eigenschaft gibt die Anzahl der Millisekunden vom 1. Januar 1970 bis zum Zeitpunkt des Ereignisses zurück .Seite 【Empfohlenes Lernen: jQuery-Video-Tutorial ,

.type

Ereignistyp. Wenn Sie einen Ereignishandler verwenden, um mehrere Ereignisse zu verarbeiten, können Sie diese Eigenschaft verwenden, um die zu erhalten Ereignistyp, z. B. „click“

.

.preventDefalut()

Die Standardaktion zum Verhindern des Ereignisses e
Web-Frontend-Video

Das obige ist der detaillierte Inhalt vonWas sind die grundlegenden Ereignismethoden in JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage