Zusammenfassung der Beispiele für die Verwendung von jQuery-Ereignissen_jquery

Dieser Artikel fasst die Verwendung von Ereignissen in jQuery ausführlich anhand von Beispielen zusammen, was einen guten Referenzwert für das Erlernen von jQuery darstellt. Teilen Sie es als Referenz mit allen. Die spezifische Verwendung ist wie folgt:

1. Binden Sie Ereignisse über Methodennamen an Elemente:

$('li').click(function(event){})

2. Binden Sie Ereignisse über die Bindungsmethode an Elemente:

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

Es ist ersichtlich, dass durch Binden mehrere Ereignisse an Elemente gebunden werden können.

3. Ereignis-Namensraum

Warum benötigen Sie einen Event-Namespace?

→Angenommen, Sie binden zunächst zwei Klickereignisse an das li-Element.

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→Jetzt müssen wir eines der Klickereignisse abmelden, das so geschrieben sein könnte:

$('li').unbind('click')

Aber auf diese Weise werden alle Klickereignisse in unserem Li abgemeldet, was nicht das ist, was wir wollen. Die Verwendung des Ereignis-Namespace kann dieses Problem lösen. Der Grund, warum der Ereignis-Namespace benötigt wird, liegt darin, dass er uns beim Abmelden von Ereignissen Komfort bietet.

Wie verwende ich den Event-Namespace?
→Wenn Sie ein Ereignis an ein Element binden, fügen Sie den Namespace nach dem Ereignisnamen hinzu und folgen Sie dabei dem Format: Ereignisname.Namespace-Name.

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→Wenn Sie sich von einer Veranstaltung abmelden, können Sie so schreiben:

$('li').unbind('click.editMode')

4. Arten von Veranstaltungen

Unschärfe
ändern
klicken
dblclick
Fehler
Fokus
Fokussieren
focusout
Tastendruck
Tastendruck
keyup
laden
Mousedown
Mauseingabe
Mauseurlaub
Mausbewegung
Mouseout
moseover
Mausup
fertig
Größe ändern
scrollen
auswählen
abschicken
entladen

5.eine Methode

Wird zum Erstellen eines einmaligen Ereignisses verwendet. Sobald dieses Ereignis einmal ausgeführt wird, wird es automatisch gelöscht.

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6. Ereignisse löschen

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.Ereignisattribut

Eigentlich handelt es sich um eine globale Eigenschaft von jquery, jQuery.Event. Immer wenn ein Ereignis ausgelöst wird, wird eine Ereignisobjektinstanz an den Ereignishandler übergeben.

Ereignisse können über den Ereigniskonstruktor erstellt und ausgelöst werden.

var e = jQueery.Event("click")
jQuery("body").trigger(e);

Sie können im Event sogar ein anonymes Objekt über den Konstruktor übergeben.

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

Erhalten Sie bei Verwendung den Wert des anonymen Objekts über event.data.KeyCode.

Anonyme Objekte können in Event über den Konstruktor von jQuery.Event übergeben werden. Darüber hinaus können anonyme Objekte auch über Ereignisse übergeben werden.

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

Es ist ersichtlich, dass der Schlüssel des anonymen Objekts über event.data abgerufen werden kann.

Über Event-Objektinstanzen können Sie auch andere Aspekte von Informationen abrufen, wie zum Beispiel:

$("p").click(function(event){
 alert(event.target.nodeName);
})

Oben erhalten Sie den Namen des Elements, das das Ereignis ausgelöst hat, über event.target.nodeName.

Zu den weiteren Eigenschaften von jQuery.Event gehören:

altKey True, wenn die Alt-Taste gedrückt wird. Auf Mac-Tastaturen ist die Alt-Taste mit Option markiert
ctrKey Strg-Taste wird gedrückt
ShiftKey Umschalttaste wird gedrückt
currentTarget das aktuelle Element in der Blasenphase
Daten
metaKey Im Allgemeinen ist die Meta-Taste Strg, aber auf dem Mac ist es die Befehlstaste
Die horizontale Koordinate des Cursors relativ zum Ursprung der Seite während des pageX-Mausereignisses
pageY Die vertikale Koordinate des Cursors relativ zum Ursprung der Seite während eines Mausereignisses
relatedTarget Das Element, das der Cursor verlässt oder betritt, wenn das Mausereignis ausgelöst wird
Die horizontale Koordinate des Cursors relativ zum Bildschirmursprung während des screenX-Mausereignisses
screenY Die vertikale Koordinate des Cursors relativ zum Ursprung des Bildschirms bei Mausereignissen
Das Ergebnis gibt den neuesten nicht undefinierten Wert des vorherigen Ereignishandlers zurück
Zielelement, das das Ereignis
auslöst Zeitstempel Der Zeitstempel in Millisekunden, als die jQuery.Event-Instanz erstellt wurde
Geben Sie den Ereignistyp ein, z. B. klicken Sie auf
Wenn es sich um ein Tastaturereignis handelt, stellt es die Nummer der Taste dar. Wenn es sich um ein Mausereignis handelt, wird aufgezeichnet, ob die linke Taste, die mittlere Taste oder die rechte Taste gedrückt wurde

8.Ereignismethode

event.preventDefault() verhindert Standardverhalten
event.stopPropgation() stoppt das „Sprudeln“, d. h. stoppt die Ausbreitung weiter oben im DOM
event.stopImmediatePropagation() stoppt die weitere Verbreitung aller Ereignisse
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.Live-Methode und On-Methode

Mit dieser Methode können wir Ereignisse für Elemente erstellen, die noch nicht existieren. Der Unterschied zur Bindungsmethode besteht darin, dass sie Ereignisse an alle übereinstimmenden Elemente binden kann und die Einstellungen diejenigen Elemente sind, die noch nicht vorhanden sind und dynamisch erstellt werden müssen. Darüber hinaus muss die Live-Methode nicht unbedingt im $(function(){})-Ready-Handler platziert werden. Nach jQuery 1.7 wurde es auf die on-Methode geändert.

$("p").on("click", function(){
 alert("hello");
})

Wenn Sie die Veranstaltungsanmeldung stornieren möchten:

$("button").click(function(){
 $("p").off("click");
})

10.Trigger-Methode

Die Trigger-Methode kann verwendet werden, wenn wir an Elemente gebundene Ereignisse manuell auslösen möchten.

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger触发由jQuery.Event创建的实例：

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger触发方法的时候传入匿名对象：

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});

如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
 $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委托

什么是事件冒泡？

有这么一段代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
 <div>
  <p><a href="#foo"><span>I am a Link!</span></a></p>
  <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
 </div>
</body>
</html>

现在，给该页面所有的元素绑定click事件，包括window和document。

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。

如何阻止事件冒泡？

显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只为a绑定了click事件，无它。

如何有效利用事件冒泡？

在jquery中，事件委托却很好地利用了事件冒泡。

<html>
<body>
<div id="container">
 <ul id="list">
  <li><a href="http://domain1.com">Item #1</a></li>
  <li><a href="/local/path/1">Item #2</a></li>
  <li><a href="/local/path/2">Item #3</a></li>
  <li><a href="http://domain4.com">Item #4</a></li>
 </ul>
</div>
</body>
</html>

现在，我们想给现有li中的a标签绑定事件，这样写：

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？

$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？

如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。

13.toggle方法

允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。