Bubble və hadisələrin ələ keçirilməsi nədir?

Tədbirdə baloncuklar və tutma arasındakı fərq nədir? İki dənəsindən, daha sürətli və daha yaxşı model istifadə etmək nədir?

854
06 янв. Arun P Johny Jan tərəfindən təyin 06 2011-01-06 18:44 '11 at 18:44 2011-01-06 18:44
@ 5 cavab

Sprging və tutma hadisələri, bir hadisə başqa bir element içindəki bir elementdə meydana gəldiyində HTML DOM API-dakı hadisələri təbliğ etmək üçün iki yoldur və hər iki element bu hadisəyə bir siqnal qeydə alır. Hadisənin yayılması rejimi , elementin hadisə almaq üçün əmr verildiyini müəyyənləşdirir.

Köpüklənmə zamanı hadisə ilk növbədə ən incə element tərəfindən tutulur və işlənir və sonra xarici elementlərə paylanır.

Bir hadisəni ələ keçirərkən, ilk növbədə xarici element tərəfindən tutulur və daxili elementlərə paylanır.

Capture də yayılma əmri xatırlamaq üçün kömək edir "trickling" adlanır:

aşağı sızan, köpüklənir

Köhnə günlərdə, Netscape hadisələrin ələ keçirilməsini müdafiə etdi, Microsoft isə hadisəni baloncuklanmasına təşviq etdi. Hər ikisi də W3C Document Object Model Events (2000) standartının bir hissəsidir.

IE 9 yalnız hadisə qığılcım hadisəindən istifadə edir, IE9 + və bütün əsas brauzerlər hər ikisini dəstəkləyir. Digər tərəfdən, köpüklənən hadisə kompleks DOM üçün bir qədər aşağı ola bilər .

Hadisənin işləyicilərini addEventListener(type, listener, useCapture) (default) və ya ələ rejimində qeyd etmək üçün addEventListener(type, listener, useCapture) istifadə edə bilərsiniz. Tutma modelini istifadə etmək üçün, üçüncü arqumenti true olaraq true .

Misal

 <div> <ul> <li></li> </ul> </div> 

Yuxarıdakı strukturda li elementdə bir klik hadisəsi meydana gəldiyini düşünün.

Tutma modelində, hadisə əvvəlcədən div işlədilir (hadisə işləyiciləri div ilk dəfə açılır), sonra ul , sonra hədəf elementi li sonunda.

Köpüklənən modeldə əksinə olur: hadisə li , daha sonra ul və sonda div elementi ilə ələ alınacaq.

Daha ətraflı məlumat üçün baxın.

Aşağıdakı nümunədə seçilmiş elementlərdən birini seçersəniz, hadisənin paylanması axınının əvvəldən keçirilməsi mərhələsinin baş verdiyini görürsünüz, sonra da köklənmə mərhələsi baş verir.

 p { line-height: 0; } div { display:inline-block; padding: 5px; background: #fff; border: 1px solid #aaa; cursor: pointer; } div:hover { border: 1px solid #faa; background: #fdd; } 
JSFiddle-də başqa bir nümunə . 

1188
06 янв. Arun P Johny tərəfindən verilmiş cavab 06 Yan 2011-01-06 18:47 '11 saat 18:47 'də 2011-01-06 18:47

Təsvir:

quirksmode.org bunun yaxşı təsvirinə malikdir. Özetle (quirksmode'den kopyalanmıştır):

Hadisə qeydləri

Hadisəni ələ keçirərkən

  | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- 

element1 hadisə işçisi əvvəlcə işə salınır, son element2 hadisə işləyicisi işə salınır.

Hadisələrin iflası

Tədbirin köpüklənməsindən istifadə edərkən

  / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- 

Element2 hadisə işləyicisi əvvəlcə işə salınır, son element1 element işləyicisi işə salınır.

border=0

Nə istifadə etməli?

Bu, nə etmək istədiyinizə bağlıdır. Daha yaxşı bir şey yoxdur. Fərq hadisəni işləyənlərin yerinə yetirilməsi qaydasında. Əksər hallarda, köpüklənmə mərhələsində hadisə işləyicilərinin işə salınması normal olacaq, ancaq əvvəllər atəş açmaq da lazım ola bilər.

460
06 янв. Cavab Felix Kling tərəfindən yanvarın 06-da verilir 2011-01-06 18:46 '11 'də 18:46' də 2011-01-06 18:46

Element 2 və element 2 varsa: Element 2 element 1 içərisindədir və hər iki elementin üzərinə onclick göstərməyə imkan verən bir hadisə işleyicisini əlavə edirik. İndi maddə 2-ə vurduğumuzda, eventHandler hər iki element üçün də icra ediləcək. Buradakı sual, hadisənin hansı qaydada yerinə yetirilməsidir. 1-ci maddə ilə əlaqəli hadisə əvvəlcə icra edildikdə, hadisə tutma adlanır və əvvəlcədən 2 maddə ilə əlaqəli hadisə yerinə yetirilirsə, bu hadisə köpüklənmə adlanır. W3C'ye uyğun olaraq, hadisə hedefe ulaşmadan önce ele geçirme aşamasında başlayacak, elemente geri döner ve daha sonra kabarcıklanmaya başlar.

Capturing və bubbling dövlət addEventListener metodunun useCapture parametri ilə tanınır

eventTarget.addEventListener (növü, dinləyici, [, useCapture]);

Varsayılan useCapture səhvdir. Yəni o, köpüklənmə prosesindədir.

 #div1{ background-color:red; padding: 24px; } #div2{ background-color:green; } 
64
04 марта '14 в 15:45 2014-03-04 15:45 cavab dinesh_malhotra mart 04 '14 saat 15:45 'də verilir 2014-03-04 15:45

Mən bu təlimatı javascript.info üzərinə bu mövzunu izah etmək üçün çox açıq bir şəkildə tapdım. Və onun 3-point reliz sonunda həqiqətən tənqidi anlar danışır. Buradan cəlb edirəm:

  • Hadisələr əvvəlcə ən dərin hədəflə ələ keçirilir, sonra isə üzə çıxır. IE <9-da, onlar yalnız baloncuklardır.
  • Bütün işləyicilər yalnız addEventListener köpüklənmə mərhələsində işləyirlər. Son arqument düzgündür, bu, tutma mərhələsində hadisəni tutmaq üçün yeganə yoldur.
  • Bubbling / capture event.cancelBubble = true (IE) və ya digər brauzerlər üçün event.stopPropagation () tərəfindən dayandırıla bilər.
23
14 мая '15 в 11:51 2015-05-14 11:51 cavab 14 may, 2012 tarixində saat 11 : 00 -da verilir

Event.eventPhase xüsusiyyəti, Event.eventPhase olub-olmadığını və ya başqa bir yerdən gəldiyini sizə xəbər verə bilər.

Xahiş edirik, brauzerinizin uyğunluğu hələ müəyyənləşdirilməyib. Mən bunu Chrome (66.0.3359.181) və Firefox (59.0.3) -də sınadım və orada dəstəklənirəm.

Alınan bir cavabdan zatən əla eventPhase yerləşdirmək, bu eventPhase istifadə edərək eventPhase

 p { line-height: 0; } div { display:inline-block; padding: 5px; background: #fff; border: 1px solid #aaa; cursor: pointer; } div:hover { border: 1px solid #faa; background: #fdd; } 
1
29 мая '18 в 10:31 2018-05-29 10:31 Cavab Adelin tərəfindən 29 may 1818 tarixində 10:31 2018-05-29 10:31 tarixində verilir

yazıları ilə bağlı digər suallar və ya sual verin