Ereignisse in jQuery

1. DOM laden

Nachdem die Seite geladen wurde, verwendet JS window.onload, um Ereignisse zu DOM-Elementen hinzuzufügen. Verwenden Sie in jQuery $(document).ready(), um Ereignisse zu DOM-Elementen hinzuzufügen. Verwenden Sie diese Methode, um das DOM zu bearbeiten, wenn es bereit ist, die Funktion zu laden und aufzurufen, an die es gebunden ist.

Vergleich zwischen window.onload und $(document).ready()

Sie können nicht mehrere gleichzeitig schreiben

window.onload=function(){}

$(document).ready(function(){})

Ausführungsmechanismus

Muss warten, bis der gesamte Inhalt der Webseite geladen ist (einschließlich Bilder)

Ausführen, nachdem alle DOM-Strukturen auf der Webseite gezeichnet wurden. Möglicherweise wurden die mit den DOM-Elementen verbundenen Dinge nicht geladen.

Anzahl schreibt

Sie können mehrere gleichzeitig schreiben

Vereinfachte Schreibmethode

Keine

	window.onload=function(){}	$(document).ready(function(){})
执行机制	必须等到网页中的所有内容加载完毕后（包括图片）	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个	可以同时编写多个
简化写法	无	$(document)可以简写为$(),不带参数时默认为document，因此可简写为： ①$(document).ready(function(){}) ②$(function(){})
对比		极大地提高了Web应用程序的相应速度
缺点		元素的关联文件未下载完，造成某些属性的无效
解决办法		使用另一个关于页面加载的方法——load()方法

$(document) kann als $() abgekürzt werden, was standardmäßig ein Dokument ohne Parameter ist, also kann es wie folgt abgekürzt werden: ①$(document).ready(function(){}) ②$(function(){})

Vergleich

Erheblich verbessert Die entsprechende Geschwindigkeit der Webanwendung

Nachteile

td>

Die zugehörige Datei des Elements wurde nicht heruntergeladen. Dies führt dazu, dass einige Attribute ungültig sind

Lösung

Verwenden Sie eine andere Methode zum Laden von Seiten – die Methode „load()“

Ergänzung: Die Methode „load()“ bindet eine Handlerfunktion im Onload-Ereignis des Elements, wenn die Handlerfunktion an das Fensterobjekt gebunden ist Wird ausgelöst, nachdem der gesamte Inhalt (einschließlich Fenster, Rahmen, Objekte, Bilder usw.) geladen wurde. Wenn die Handlerfunktion an ein Element gebunden ist, wird sie ausgelöst, nachdem der Inhalt des Elements geladen wurde.

1 $(window).load(function(){2 //编写代码3 })

2. Ereignisbindung — —bind()-Methode

Format: bind(type [, data] , fn)

Der erste Parameter ist der Ereignistyp: Unschärfe, Fokus, Laden, Entladen, Größe ändern, Scrollen, Klicken, Doppelklick, Mousedown, Mouseover, Mouseup, Mousemove, Mouseout, Mouseenter, Mouseleave, Ändern, Auswählen, Senden, Tastendruck, Tastendruck, Tastendruck, Fehler

Der zweite Parameter ist ein optionaler Parameter, bei dem es sich um ein zusätzliches Datenobjekt handelt, das als Attributwert evert.data an das Ereignisobjekt übergeben wird

Die dritte Mahlzeit Es handelt sich um eine Verarbeitungsfunktion, die zum Binden verwendet wird.

Ergänzung: Um festzustellen, ob ein Element angezeigt wird, verwenden Sie die Methode is() in jQuery

Abkürzung: .mouseover(function(){})

Andere Verwendung der bind()-Methode:

(1) Eins -Zeit für ein Element Mehrere Ereignistypen binden

 
$("p").bind("mouseover mouseout",
function
(){};);

(2) Ereignis-Namespace hinzufügen, um die Verwaltung zu vereinfachen

3. Synthetisches Ereignis

hover()-Methode: Cursor-Hover-Ereignis simulieren

Format: Hover (Eingabe, Verlassen);

Wenn sich der Cursor zum Element bewegt, wird die angegebene erste Funktion ausgelöst. Wenn der Cursor das Element entfernt, wird die angegebene zweite Funktion ausgelöst 🎜>

Alternative Ereignisse: bind("mouseenter") und bind("mouseleave")

toggle()-Methode: Simulieren Sie kontinuierliche Mausklickereignisse

Format: toggle(fn1,fn3...fnN);

$(function()){
      $("#panel").toggle(function(){
               $(this).next().show();
       },function(){
                $(this).next().hide();
       })
})

Der hinzugefügte Umschalter hat eine weitere Funktion: das Umschalten des sichtbaren Zustands des Elements. Wenn das Element Kursunterlagen angeklickt wird, wird es ausgeblendet. Wenn das Element ausgeblendet ist, wird es nach dem Klicken zum Wechseln sichtbar

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

4. Ereignisblasen

Blasen : Verschachtelte Elemente entsprechen der Ausführungsreihenfolge desselben Ereignisses, und die Ereignisse folgen der DOM-Hierarchie bis zur Spitze

Probleme durch Ereignisblasen:

(1) Ereignisobjekt: Ereignis

Um ein Ereignisobjekt zu erstellen, müssen Sie nur ein Parameterereignis zur Ereignisverarbeitungsfunktion hinzufügen. Wenn ein Ereignis auf einem Element ausgeführt wird, kann nur auf dieses Objekt zugegriffen werden Funktion. Nachdem die Ereignisverarbeitungsfunktion ausgeführt wurde, wird das Ereignisobjekt zerstört

(2) Ereignissprudeln stoppen: event.stopPropagation()-Methode

(3) Standardverhalten verhindern: event.preventDefault ()-Methode

Beispiel: Formularvalidierung Verhindern Sie die Formularübermittlung, wenn die Übermittlungsbedingungen nicht erfüllt sind (Standardverhalten)

$(function(){
      $("#sub").bind("click",function(event){
              var username=$("#username").val();
              if(username==""){
                     $(""#msg).html("<p>文本框内容不能为空</p>")；
                     event.preventDefault();
              }
        })
})

Wenn Sie das Sprudeln und das Standardverhalten für das Ereignisobjekt gleichzeitig stoppen möchten, können Sie in der Ereignisbehandlungsfunktion

Ereigniserfassung

Ereignis zurückgeben Erfassung und Ereignissprudeln sind Denkprozesse, und die Ereigniserfassung wird von oben nach unten ausgelöst.

Nicht alle Browser unterstützen die Ereigniserfassung und jQuery unterstützt nicht

6. Eigenschaften von Ereignisobjekten

补充：（1）JS中的stopPropagation()方法不兼容IE浏览器

（2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。

（3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。

6.移除事件

（1）移除按钮元素上已有的事件：$("#btn").unbind();

格式：unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数

①如果没有参数，删除所有绑定的事件。

②有参数只删除参数类型的绑定事件。

③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。

（2）移除元素中的其中一个事件

在绑定时要给匿名函数指定一个变量

$(function(){
      $("#btn").bind("click",myFun1=function(){
           //代码1
      }).bind("click",myFun1=function(){
           //代码2
      }）
})

单独移除某个绑定事件

$("#del1").click(function(){
      $("#btn").unbind("click",myFun2);
 })

注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

 

Das obige ist der detaillierte Inhalt vonEreignisse in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!