Оқиға көпіршігі - Event bubbling

Оқиға көпіршігі бұл оқиғаны тарату түрі[1] Мұнда оқиға алдымен ішкі мақсатты элементтен басталады, содан кейін мақсатты элементтің ата-бабаларына (ата-аналарына) сол ұялау иерархиясындағы шеткі деңгейге дейін дәйекті түрде басталады DOM элемент немесе құжат нысаны[2] (Өңдегіш баптандырылған жағдайда). Бұл браузерде оқиғаларды өңдеудің бір әдісі. Оқиғалар - бұл қолданушы жасаған, мысалы, батырманы басу, өрісті өзгерту және т.б. Іс-шара өңдеушілері қолданушы интерфейсінің белгілі бір оқиғасы болған кезде кодты орындау үшін қолданылады, мысалы, батырма басылған кезде немесе веб-сайт жүктеуді аяқтаған кезде.

Шолу

DOM құрылымын қарастырайық, онда 3 элемент орналасқан, олар келесі тәртіпте орналасқан: 1-элемент (Div), 2-элемент (Span), 3-элемент (Button), олардың басу кезіндегі өңдеушілер сәйкесінше өңдеуші1 (), handler2 () және өңдеуші3 () болып табылады. .

DOM құрылымында оқиғаның көпіршігі қалай жұмыс істейді
<div id="Element1" onclick="handler1()">   <span id="Element2" onclick="handler2()">      <input type="button" id="Element3" onclick="handler3()"/>    </span>  </div>  

Элемент3 батырмасы басылғанда, алдымен 3 элементіне арналған оқиға өңдеушісі іске қосылады, содан кейін оқиға көпіршігі пайда болады және тікелей ата-ана элементі - 2 элементі, содан кейін 1 элементінің өңдеушісі және ең шеткі DOM-ға жеткенше шақырылады. элемент.

Оқиғаға тапсырыс беру: handler3 () -> handler2 () -> handler1 ()

Оқиға басталған ішкі элемент мақсатты элемент деп аталады.[3] Браузерлердің көпшілігі оқиғалардың көпіршуін оқиғалардың таралуының әдепкі әдісі деп санайды. Дегенмен, оқиғаны тарату үшін тағы бір тәсіл бар, деп аталады Оқиғаны түсіру,[4] бұл оқиғалардың көпіршуіне тікелей қарама-қайшылық, мұнда оқиғалармен жұмыс DOM құрылымының ең шеткі элементінен (немесе Құжаттан) басталып, мақсатты элементке дейін барады, мақсатты элементтер өңдеушісі ретімен орындалады.

Іске асыру

Барлық оқиғалар өңдеушілер оқиғалардың көпіршуін оқиғаларды өңдеудің әдепкі тәсілі ретінде қарастырады. Бірақ пайдаланушы тарату жолын қолмен таңдай алады, оны соңғы параметр ретінде көрсете алады addEventListener () [5] JavaScript-тегі кез келген элемент.

addEventListener («түр», «тыңдаушы», «CaptureMode»)

Егер CaptureMode жалған болса, оқиға оқиға көпіршігі арқылы өңделеді.

Егер CaptureMode шын болса, оқиға оқиғаны түсіру арқылы өңделеді.

Егер пайдаланушы CaptureMode аргументінің қандай да бір мәнін көрсетпесе, онда ол әдепкі бойынша оқиға көпіршігі болып саналады. Браузердің көпшілігі оқиғаның көпіршуін де, оқиғаны түсіруді де қолдайды (IE <9 және Opera <7.0 қоспағанда, олар оқиғаны түсіруге қолдау көрсетпейді).[1]

JavaScript сонымен қатар аталатын оқиға сипатын ұсынады көпіршіктер оқиғаның көпіршікті екенін немесе жоқтығын тексеру үшін. Ол оқиғаның DOM құрылымындағы тектік элементтерге дейін көпіршітуіне немесе болмауына байланысты логикалық мәнді True немесе False мәніне айналдырады.

var isBubblePossible = event.bubbles;

isBubblePossible: егер оқиға ата-бабаларымызға дейін жетуі мүмкін болса

isBubblePossible: жалған, егер оқиға көпіршіктірілмесе[6]

Іс-шараның көпіршігін пайдалану

Бір оқиға бірнеше өңдеушіге ие болған жағдайда, оқиғалардың көпіршігі тұжырымдамасын іске асыруға болады. Іс-шаралардың көпіршікті қолданылуының негізгі әдісі - бағдарламада бар әдепкі функцияларды тіркеу. Соңғы кездері оқиғаларды түсіруді немесе көбіктенуді көп әзірлеушілер қолданбайды. Іс-шараның көпіршігін енгізу қажет емес; қолданушыларға оқиғаға байланысты орындалған әрекеттерді бақылау қиынға соғуы мүмкін.[1]

Оқиғалардың көпіршуіне жол бермеу

Кейде бір элементте бір триггерді тоқтату пайдалы, себебі ата-бабалар бірнеше триггерге әкеледі. JavaScript оқиғаның көпіршуіне жол бермейтін келесі әдістерді ұсынады:

1) stopPropagation (): Бұл әдіс мақсатты элементтің оқиға өңдеушісіне ғана жүгіне отырып, кез-келген нақты оқиғаны ата-аналарына одан әрі таратуды тоқтатады. Барлығы қолдағанымен W3C үйлесімді браузерлері, Internet Explorer 9 нұсқасының астында тарихи бүркеншік ат қажет көпіршігі,[7] сияқты:

event.cancelBubble = шын;

Барлық W3C үйлесімді браузерлері үшін:

event.stopPropagation ();

2) stopImmediatePropagation (): Бұл әдіс әрі қарай таралуды тоқтатып қана қоймай, мақсатты оқиғаның кез-келген өңдеушісінің орындалуын тоқтатады. DOM-да бірдей оқиға бірнеше тәуелсіз өңдеушілерге ие болуы мүмкін, сондықтан бір оқиға өңдеушісінің орындалуын тоқтату, әдетте, сол мақсаттағы басқа өңдеушілерге әсер етпейді. Бірақ stopImmediatePropagation () әдісі сол мақсаттағы кез келген басқа өңдеушінің орындалуына жол бермейді.[7]

Барлық W3C үйлесімді браузерлері үшін:

event.stopImmediatePropagation ();

Оқиға көпіршілігін тоқтату үшін тағы бір тәсіл - бұл оқиғаның өздігінен бас тарту, бірақ бұл мақсатты өңдеушінің орындалуына жол бермейді.

Сондай-ақ қараңыз

Әдебиеттер тізімі

  1. ^ а б c «Javascript - іс-шараға тапсырыс». www.quirksmode.org. Алынған 2016-09-11.
  2. ^ «HTML DOM құжат нысандары». www.w3schools.com. Алынған 2016-09-11.
  3. ^ https://www.w3schools.com/jsref/event_target.asp
  4. ^ «Пісіру және түсіру | JavaScript оқулығы». javascript.info. Алынған 2016-09-11.
  5. ^ «HTML DOM addEventListener () әдісі».
  6. ^ «көпіршіктер іс-шараның қасиеті». www.w3schools.com. Алынған 2016-09-11.
  7. ^ а б «Іс-шараның көпіршігі, оны қалай болдырмауға болады?». www.markupjavascript.com. Алынған 2016-09-11.