Настилки и прихващане

Настилката гарантира, че кликване върху Inland

причина манипулатор OnClick (ако има такива) на първия

. след това елемент

Освен това член
. и така нататък по веригата към документа родител.

Настилки и прихващане

Ето защо, ако в горния пример, кликнете върху П. последователно ще се покаже предупреждение. р → DIV → форма.

Този процес се нарича изкачване. защото събития "плувка" на вътрешния елемент нагоре през родителя, просто като въздушен балон плува във вода.

Поп почти всички събития.

Ключовата дума в тази фраза - "почти".

Например, събитие фокус не плава. В следващите глави, ние ще се запознаят по-подробно с различните събития и да видим повече примери.

По какъвто елемент хванахме всеки случай, винаги можете да разберете къде точно се е случило.

Най-дълбокото елемент, който предизвиква събитието се нарича "мишена" или "оригинала" елемент и е на разположение като event.target.

Разлики от това (= event.currentTarget):

  • event.target - това е елемент източник. на която събитието настъпили през изкачване той е непроменим.
  • това - това е текущия елемент. към които дойде изкачване, сега е извършено на манипулатора.

Например, ако има само един процесор form.onclick. той "хванат" всички кликвания в рамките на матрицата. Където и да кликнете вътре - тя се появи елемент . което предизвика манипулатор.

  • това (= event.currentTarget) винаги ще бъде самата форма като манипулатор е работил върху него.
  • event.target ще съдържа линк към специфична част от формата, най-вътрешната, в които е имало едно кликване.

Ако елементът има множество процесори за едно събитие, дори и ако прекратяването на изкачване всички те ще бъдат изпълнени.

Това означава, че stopPropagation възпрепятства хода на събитията по-нататък, но всички процесори ще работят по текущия елемент.

За да се спре напълно този процес, модерни браузъри поддържат метод event.stopImmediatePropagation (). Тя не само предпазва от изкачването, но спира за обработка на събития в текущия елемент.

Не спирайте бълбука няма нужда!

Ascent - това е удобно. Не го спре без специалните потребности, ясна и прозрачна архитектура.

Често прекратяване на изкачване създава свои собствени капани, които след това трябваше да се направи.

  1. Ние правим меню. Той се справя кликвания върху неговите елементи и ги прави stopPropagation. Подобно, всичко работи.
  2. По-късно решихме да следим всички кликвания в прозореца за някои от неговата функционалност, например, за статистиката - Къде сме кликнали хора. Например, Yandeks.Metrika прави това чрез включване на подходящата опция.
  3. Над мястото, където най-много кликвания са убити stopPropagation. Статистика няма да работи! Резултатът е "мъртва зона".

Проблемът е, че stopPropagation убива всякаква възможност за проследяване на събитието от по-горе, и е необходимо за реализиране на нещо "обикновен", че в менюто няма връзка изобщо.

В съвременния стандарт, с изключение на "изкачване" на събитията, и да предостави повече "потапяне".

Тя е много по-малко търсене, но понякога, много рядко, знания за това може да бъде полезно.

Строго погледнато, стандарта определя най-много три етапа събитие мине:

  1. Събитието първо отива от горе до долу. Този етап се нарича "прихващане етап» (заснемане на сцената).
  2. Събитието е достигнал елемента цел. Това - на ниво "цели» (целева етап).
  3. След това събитие започва да се появят. Това - "(етап бълбука) за изкачване етап».

Настилки и прихващане

Това е, когато щракнете върху събитието TD пътува през веригата на родителите първо надолу до елемента ( "мивки"), а след това в началото ( "УОЗ"), на манипулаторите на шосейното колоездене.

По-рано, ние говорихме само за изкачване, защото друга сцена, като правило, не са използвани и са невидими за нас.

Манипулатори добавени сам. -Имуществената, не знам нищо за етапа на прихващане и да започне да работи с изкачване.

За улов на събитието на сцената на залавяне, трябва да се използва Третият аргумент да addEventListener:

  • Ако това е вярно аргумент. събитието ще се пресече по пътя надолу.
  • Ако аргументът е невярно. събитието ще се хванат за изкачване.

Етап цел е показано на фигура номер (2). особено не се третира като процесори, определени от тези в двете посоки, да работят и на целевата клетка.

Има събития, които не идват, но които могат да бъдат прихванати

Има събития, които могат да бъдат уловени само в етапа на прихващане и на етапа на изкачването - не ...

Например, такъв фокус onfocus събитие на елемент. Разбира се, това е много рядко, съществува такова освобождаване по исторически причини.

В примера по-долу .

.

са същите процесори както преди, но този път - по гмуркане етап. За да видите прихващането в действие, кликнете върху елемента в него

:

Трябва да бъде ФОРМА → → DIV P → P → → DIV ФОРМА. Имайте предвид, че елементът

участва и в двата етапа.

Както се вижда от примера, същия процесор може да се причисляват към различни етапи. В този случай номер на текущата го етап, ако е необходимо, може да се получи от свойства event.eventPhase на (= 1, ако потапяне е 3, ако изкачване).

За да направи по-лесно да се движите, събрах IE8- разлики, които са свързани с изкачване в една секция.

Техните знания ще бъдат необходими, ако решите да пишете на чисти JS, без рамки и трябва IE8- подкрепа.

Няма въведени имоти event.currentTarget

Имайте предвид, че при определяне на манипулатор през onsvoystvo имаме това. така event.currentTarget. Като правило, не е необходимо, но назначаването през attachEvent манипулатор не се получи това. така че текущия елемент, ако е необходимо, може да бъде взето само от затварянето.

Вместо event.target в IE8- използва event.srcElement

Ако се напише манипулатор, че ще подкрепи и IE8- и съвременни браузъри, можете да я стартирате, както следва:

За да спрете изкачване използва код event.cancelBubble = вярно.

Cross-браузър, за да спре изкачването, можете да:

По-късно през начинаещи, ние ще използваме стандартните свойства и предизвикателствата, тъй като добавянето на тези редове, за да се гарантира съвместимост - сравнително проста и очевидна задача. Освен това, никой не си прави труда да се свърже polifill.

Още веднъж бих искал да отбележа - тези различия трябва да знаете, когато пишете JS-код-съвместим IE8- без рамки. Почти всички JS-рамки предоставят различни браузъри подкрепа, за да се насочите. currentTarget и stopPropagation ().

  • Когато настъпи събитие - елементът, на която е маркирана като "мишена" (event.target).
  • Следваща събитие е първото премества надолу от корена на документа, за да event.target. по протежение на пътя причинява отговорниците пуснати през addEventListener (. истина).
  • На следващо място, събитието се движи от event.target до корена на документа, пътят причинявайки отговорниците сложи сам * и addEventListener (. False).

Всеки процесор има достъп до свойствата на събитието:

  • event.target - най-дълбоката елемент на която е настъпило събитието.
  • event.currentTarget (= това) - елемент, който най-манипулатор момент натоварване (към които "плуват" събитие).
  • event.eventPhase - до каква фаза тя работи (= 1 гмуркане, възляза = 3).

Всеки процесор може да го спре, като се обадите event.stopPropagation (). но това не се препоръчва, защото в бъдеще това събитие може да се наложи, понякога най-неочаквани неща.

В настоящия етап на развитие на потапяне се използва много рядко.

Има две причини:

Исторически - тъй като IE версия 9 само напълно подкрепя сегашния стандарт.

Разумна - когато възникне събитие, е разумно да се даде възможност на първия преработвател на работа елемент, защото това е най-специфичния. Кодът, който се поставя върху елемент процесор, знае максимума на информация за какъв вид елемент на това, което той прави.

Освен това, има смисъл да се прехвърли на обработката на събитието, за да родителя - той също разбира какво се случва, но в по-малко подробности и т.н. - по-горе, и така нататък, докато на документ. процесор, който изпълнява най-често срещаната функционалността документ ниво.