Начиная с сегодняшней главы, я сосредоточусь на внедрении содержания управления событиями KITJS и постараюсь разоблачить вам на простом языке, как основная структура JS реализует свою собственную независимую функцию управления событиями внутри.
(I) Обычные события DOM
Как правило, мы можем писать события в HTML, поддерживая
<a onclick = ”alert (1)”> тест </a>
Или привязан после получения объекта DOM
document.getElementById ('a'). OnClick = function () {alert (1)}
Или вторичные события
Document.getElementById ('a'). addEventListener ('click', function () {alert (1)}, flase)
Или через тег сценария
<script for = ”a” event = ”onclick”> alert (1) </script>
Стандарт W3C рекомендует приведенный выше третий метод привязки, который является вторичным методом событий, с целью отделения сильной зависимости HTML и JS
(Ii) Вопрос
Однако, если мы только используем режим 3 для непосредственного выполнения нашего программирования JS, этого недостаточно, потому что мы столкнемся с следующими проблемами
1. Совместимость браузера. Параметры браузера, поддерживаемые сериями IE и W3C, не являются последовательными для имен и параметров привязки событий второго уровня.
2. После привязки через события уровня 2 вы не можете знать, связаны ли другие события с одним и тем же элементом, какие события были связаны, и каково содержание события?
3. После того, как метод связывания событий уровня 2 запускается, порядок не находится в порядке до привязки, но выполняется случайным образом. Однако иногда нам нужно заказать запускаемые методы.
4. Когда событие того же элемента запускается, стандартный API W3C не поддерживает остановку и продолжает запускать другие события, связанные с тем же элементом, W3C поддерживает остановку пузырьков.
5. Много раз, мы регистрируем событие 2 -го уровня с помощью метода анонимной функции, и никакой ручки для регистрации метода выполнения события не осталось, поэтому трудно отменить событие через RemoveEventListener.
(Iii) Как решить проблему комплекта
ОК, фреймворк JS существует, чтобы решить вышеуказанные проблемы. Давайте посмотрим, как Кит решает вышеупомянутые проблемы.
В API Kit.js есть метод EV (config)
Этот метод принимает объект типа карты, который содержит 4 важных параметра.
Эль -элемент, который должен быть связан
Тип строкового события
Метод выполнения FN запускает
Область может быть опущена, необходимо ли указать этот указатель, если никто не является, EL во время регистрации передается как этот указатель
(Iv) Анализ кода
Давайте посмотрим на реализацию кода
Начните прямо с основной части
Если входящий параметр не является пустым, объект создается в входящем параметре EL для сохранения регистрации события KitJs Evreg
В объекте Evreg есть два дочерних объекта, один называется evregev, который сохраняет зарегистрированное событие
В объекте Evregev сохраните ключ в качестве текущего зарегистрированного события, а значение - массив. В массиве поместите параметры конфигурации, передаваемые в метод EV в порядке сначала, а затем прибытия. Обратите внимание, что это массив! ! ! Поскольку массивы могут сохранить заказ, это очень важно
Существует также анонимный метод под названием Evregfn, который сохраняет триггеры события.
Мы видим, что evregfn - это анонимное событие. В начале он определит, является ли глобальное окно переменной [me.constants.kit_event_stopimmediatepropagation] == true. Если это правда, он вернется и не будет продолжать выполнять.
Затем посмотрите вниз, он примет объект EV, запускаемый событием, и прикрепит множество объектов к EV, используя Mergeif, такой как Target, CurrentTarget, связанный с собой, чтобы решить проблему совместимости браузера.
Stopnow, Stopdefault, Stopgoon - это методы, созданные для предотвращения продолжения событий.
Следующий абзац является ключом к Evregfn. Мы пройдемся через массив событий в evregev, созданном ранее, выберем параметры конфигурации, передаваемые в предыдущем методе EV по порядку, и выполнить метод в параметре конфигурации. Если возвращаемое значение метода не является пустым, оно вернет свое возвращаемое значение.
Наконец, мы делаем совместимый с браузером и связываем наш анонимный метод Evregfn, используя метод события уровня 2.
(V) Резюме
Проще говоря, Kit использует свой собственный анонимный метод для кэширования ручки регистрации событий и ввода массива, чтобы он мог запомнить последовательность событий, а также предоставить запись, чтобы узнать ранее зарегистрированные события, параметры, методы и т. Д., А в то же время она совместима с совместимостью браузера.
(Vi) Событие входа в систему
С ручками событий справочного кеша комплекта, регистрация становится простым
Вы можете увидеть, что комплект находит соответствующую конфигурацию события посредством прямого сравнения или сравнения Fn.toString, и сравнение fn.toString (). Trim () и удаляет его из массива
(Vii) Улучшение события
Вы должны были заметить только сейчас, что Kit сделал операцию Mergeif на объекте события System. Прежде всего, зачем вам делать Megerif? Поскольку свойства объекта объекта события системы читаются и не могут быть перезаписаны, вы можете добавить только свойства, которых он не имеет.
Так что Кит может только Межериф. Мы все знаем, что существует несовместимость объекта события объекта события каждого браузера, поэтому Kit должен исправить эту несовместимость. Например, IE не имеет целевого атрибута, только Srcelement. Мы можем добавить к нему целевой атрибут для достижения совместимости стандарта W3C
Конечно, просто ремонт не может удовлетворить наши потребности. Много раз нам все еще нужно сделать немного увеличения веса для объекта события.
Например, при разработке приземления и Touchmove на iPhone нам часто нужно получить смещения с одним пальцем и получить смещения с одним пальцем, Ev.TargetTouches [0] .clientx, такой код, но как только анонимная функция будет такой, она будет несовместимой на ПК.
Что делать? Это не имеет значения, мы можем дать слияние объектов события, наши собственные атрибуты
FirstFingerClientx и т. Д., Чтобы мы могли легко реализовать унифицированный код, разработанный мобильным и ПК.
В том числе в следующей статье рассказывается о Drag and Drop HTML5, а расширенные события жеста основаны на этой основе.
Добавьте к этому, почему бы не новое собственное событие, например, Extjs, потому что
1. Системный нативный объект имеет определенные отношения наследования и не хочет быть уничтоженным.
2. Если вы используете свой новый объект, код может быть невозможным после того, как он выходит из фреймворка, а содержимое кода должно быть снова изменено.