,
İşleyiciler öncekiyle aynı, ancak bu sefer - daldırma aşamasında. Pekala, müdahaleyi çalışırken görmek için içindeki öğeye tıklayın.
İşleyiciler "yukarıdan aşağıya" sırayla tetiklenir: FORM → DIV → P.
Buradaki JS kodu şöyle:
Var elements = document.querySelectorAll ("form, div, p"); // (var i = 0; i) için durdurma aşamasında her öğe için bir işleyiciyi kapat< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
}
Her iki aşama için de işleyici atamanız için kimse sizi rahatsız etmez, bunun gibi:
Var elements = document.querySelectorAll ("form, div, p"); for (var i = 0; i< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
elems[i].addEventListener("click", highlightThis, false);
}
İç elemana tıklayın
Etkinlik sırasını görmek için:
FORM -> DIV -> P -> P -> DIV -> FORM olmalıdır. Unutulmamalıdır ki, eleman
Her iki aşamaya da katılacak.
sonuçlar
- Bir olay meydana geldiğinde - olayın meydana geldiği öğe event.target olarak işaretlenir.
- Olay ilk önce belge kökünden event.target'e doğru ilerler ve yol boyunca addEventListener (…., True) aracılığıyla sağlanan işleyicileri çağırır.
- Olay, addEventListener (…., False) aracılığıyla sağlanan işleyicileri çağırma yolu boyunca event.target'ten belgenin başına kadar hareket eder.
Her işleyici, olayın özelliklerine erişebilir:
- event.target, olayın gerçekten gerçekleştiği en derin öğedir.
- event.currentTarget (= bu) - kendi kendine işleyicinin o anda tetiklediği öğe (olayın "ulaştığı").
- event.eventPhase - olay işleyicinin hangi aşamada tetiklendiği (daldırma = 1, kabarcıklanma = 3).
Bubbling event.stopPropagation () yöntemi çağrılarak durdurulabilir, ancak olaya en beklenmedik amaçlar için ihtiyaç duyabileceğiniz için bunu yapmanız önerilmez.
Bir olaya müdahale
Dilin önemli özelliklerinden biri olay müdahalesidir. Örneğin, biri bir düğmeyi tıklarsa, o düğmeye karşılık gelen onClick olay işleyicisi çağrılır. Olay işleme yardımıyla, pencerenize, belgenize veya katmanınıza karşılık gelen nesnenin, olay işleyicisi bu amaç için belirtilen düğmenin nesnesi tarafından çağrılmadan önce bile olayı yakalayıp işlemesini sağlayabilirsiniz. Benzer şekilde, pencerenizdeki, belgenizdeki veya katmanınızdaki bir nesne, normal hedefine ulaşmadan önce bir olay sinyalini işleyebilir.
Bunun ne için yararlı olabileceğini görmek için aşağıdaki örneğe bakalım:
Bu bağlantıya tıklayın
Gördüğünüz gibi etikette olay işleyicileri belirtmiyoruz ... Onun yerine yazıyoruz
window.captureEvents (Event.CLICK);
olayı engellemek için Tıklamak pencere nesnesi. Genellikle pencere nesnesi olayla çalışmaz Tıklamak... Ancak, ele geçirdikten sonra onu pencere nesnesine yönlendiririz. Şuna dikkat edin: Etkinlik.TIKLAYIN parça TIKLAYIN büyük harflerle yazılmalıdır. Birkaç olayı engellemek istiyorsanız, onları | sembolleri ile birbirinden ayırmalısınız. Örneğin:
window.captureEvents (Event.CLICK | Event.MOVE);
Ayrıca fonksiyon içerisinde üstesinden gelmek () tarafımızdan olay işleyici rolüne atanmışsa, talimatı kullanırız true döndür;... Bunun gerçekten anlamı, işlev tamamlandıktan sonra tarayıcının bağlantıyı kendisi işlemesi gerektiğidir. üstesinden gelmek ()... onun yerine yazarsan yanlış döndür; o zaman her şey orada bitecek.
Eğer şimdi etiketteyse
Olay işleyicisini tanımlayacaksınız tıklamada, bu olay gerçekleştiğinde bu programın çağrılmayacağını anlayacaksınız. Bu şaşırtıcı değildir, çünkü pencere nesnesi olay sinyalini bağlantı nesnesine ulaşmadan önce yakalar. Bir fonksiyon tanımlarsanız üstesinden gelmek () nasıl
fonksiyon tutamacı (e) (
alert ("Pencere nesnesi bu olayı yakaladı!");
window.routeEvent (e);
true döndür;
}
daha sonra bilgisayar, bu nesne için başka olay işleyicilerinin tanımlanıp tanımlanmadığını kontrol edecektir. e değişkeni, olay işleme işlevine argüman olarak iletilen Event nesnemizdir.
Ayrıca, bir nesneye doğrudan bir olay sinyali gönderebilirsiniz. Bunu yapmak için yöntemi kullanabilirsiniz. handleEvent ()... Şuna benziyor:
Bu bağlantıya tıklayın
onClick = "alert ("İkinci bağlantı için olay işleyicisi! ");"> İkinci bağlantı
Click olaylarıyla ilgili tüm sinyaller, ikinci bağlantı aracılığıyla işlenmek üzere gönderilir - hiçbir bağlantıya tıklamamış olsanız bile!
Aşağıdaki komut dosyası, komut dosyanızın tuş vuruşu sinyallerine nasıl yanıt verebileceğini gösterir. Bir tuşa tıklayın ve bu betiğin nasıl çalıştığını görün.
Bir HTML sayfası oluşturalım ve yukarıdaki HTML kodunu içine yapıştıralım. Kapanış body etiketinden önce JavaScript ile yazılmış scripti ekleyelim. Bundan sonra, yeni oluşturulan sayfayı bir web tarayıcısında açın, F12 tuşuna basın ve konsola gidin. Şimdi güçlü elemente ait alana sol tıklayıp olayın nasıl balonlaşacağını görelim.
Bir olayın köpürmesi nasıl durdurulur
Bir olayın (kabarcık) köpürmesi kesilebilir. Bu durumda, bu olay üst (ebeveyn) öğeler için tetiklenmeyecektir. Bubbling olayını (kabarcık) durdurmak için tasarlanan yönteme stopPropagation() adı verilir.
Örneğin, yukarıdaki örneğimizi olay gövdenin üzerinde kabarmayacak şekilde değiştirelim:
