События представляют собой метод реализации асинхронного программирования, по существу общение между различными компонентами программы, а DOM поддерживает большое количество событий;
В этой статье используются эти пункты для подробного анализа основных принципов обработки событий: тип события, цель события, обработчик событий, объект события, распространение событий
Наконец, я представлю объект события для вас;
1. Тип события: это полная строка строчка, используемая для указания того, какой тип события произошел, например, «Mouseover»
Традиционные типы событий: Формы событий, события окон, события мыши, события клавиатуры, события DOM, события HTML5, события сенсорного экрана и мобильные устройства и т. Д.
2. Цель события: объект, который запускает событие
3. Слушатель событий: функция, которая обрабатывает или отвечает на события. Когда объект запускает событие, браузер автоматически вызовет функцию, зарегистрированную на объекте;
Зарегистрируйте обработчик событий (слушайте события):
1. Зарегистрируйтесь как атрибуты HTML (он будет запускаться только в фазе пузырьков), таких как <таблица идентификатора = "t" onclick = "modifytext ();">; и некоторые типы событий обычно запускаются непосредственно в браузере, а не на каком -либо конкретном элементе документа. Эти обработчики событий помещаются на тег <body>, но браузер зарегистрирует их в окне, например, <body onload = "alert ('hello world!')">, И эти события включают в себя:
Onafterprint onfocus ononline onresize onbeprint onhashchange
OnPageHide Onstorage OnbeForeUnload OnPageShow Onundo
Onblur onMessage OnPopstate onunload OneError Onoffline onredo
Значением события в качестве атрибута HTML является строка кода JS, которая является корпусом функции обработки и не содержит {}. Примечание. Постарайтесь не регистрировать события на любых других тегах HTML, это нарушает принцип разделения кода HTML и JavaScript. Если функция события может нажать на элемент объекта события до его загрузки, это приведет к ошибке;
2. Зарегистрируйтесь в качестве атрибута элемента DOM (он будет запускаться только на стадии пузыря). В настоящее время название атрибута обработчика событий должно быть префикс с «ON». Этот метод совместим со всеми браузерами. Единственным недостатком является то, что он может зарегистрировать только одну функцию обработчика событий. Если атрибут OnClick определяется дважды, последнее определение будет перезаписать предыдущее; Например: window.onload = function () {...};
3. Во всех браузерах, кроме IE8 и предыдущих версий, операции событий (прослушивание и запуск) DOM определяются в интерфейсе EventTarget. Этот интерфейс развернут для узла элемента, узла документа и окна. Кроме того, встроенные объекты браузера, такие как Xmlhttprequest, Audionode, AudioContext и т. Д. Также развернули этот интерфейс. Существует три метода этого интерфейса, AddEventListener и RemoveEventListener используются для привязки и удаления функций слушателя, а для запуска событий используется диспетчер;
Метод AddEventListener (тип, слушатель, логический) используется для регистрации прослушивателя. Третий параметр устанавливает метод распространения событий. Обычно используется значение false по умолчанию, что означает, что функция слушания запускается только на стадии пузырька (Pupple). При установке True это означает, что функция прослушивания запускается на стадии захвата (захват); Любые несколько слушателей могут быть зарегистрированы для одного и того же события на одном и том же объекте, и все слушатели будут запускаться в заказе регистрации (регистрация дубликатов слушателей будет игнорироваться браузером);
Если вы хотите передать параметры функции слушания, вы можете обернуть функцию слушания анонимными функциями, такими как elm.addeventlistener ('click', function () {listen ('real Argiry')}, false);
Когда зарегистрированный слушатель является эталонной переменной для функции, вы можете использовать RemoveEventLestener (тип, слушатель, Boolean), чтобы удалить слушателя в цели события. Пузырьковые события и захват событий одного и того же события прослушивания должны быть удалены отдельно, и они не мешают друг другу;
var div = document.getElementbyId ('div'); var alluster = function (event) { / * сделать что -нибудь здесь * /}; div.addeventlistener ('click', слушатель, false); div.removeeventlistener ('Щелкни, слушатель, false);Метод DispatchEvent (Event) вручную запускает указанное событие на текущем узле, тем самым запуская выполнение функции прослушивания. Этот метод возвращает логическое значение. Пока функция прослушивания вызывает event.preventdefault (), она возвращает false. В противном случае это правда. Параметр является экземпляром объекта события. Параметр не может быть пустым и должен быть действительным объектом события, в противном случае будет сообщена ошибка.
btn.addeventlistener ('click', слушатель, false);
var e = новое событие ('click');
btn.dispatchevent (e); // Событие Click сразу же запускается на BTN, и слушатель будет вызван немедленно
В следующем примере определяется, было ли событие отменено на основе возвращаемого значения метода DispatchEvent.
var undersed =! btn.dispatchevent (event);
if (отменен) {console.log ('event cancel'); }
else {console.log ('событие не отменено'); }}
4. IE8 и предыдущие версии поддерживают только AttachEvent (тип, слушатель) и Depachevent (Type, Sulderer). Их использование и addeventlistener разные: a. Есть только два параметра; беременный Тип параметра должен быть префикс с 'on'; в Это позволяет повторять регистрацию того же события прослушивания и будет вызван; дюймовый Существует недостаток в использовании метода AttactEvent, который состоит в том, что значение этого станет окном -объектом вместо элемента, который запускает событие;
Проблемы заказа вызова: 1). Обработчики, зарегистрированные путем установки свойств объекта или атрибутов HTML, всегда называются первыми;
2). Хандлеры, зарегистрированные в AddeventListener, вызываются в их заказах;
3). Хандлеры, зарегистрированные в AttedEvent в Legacy, IE могут быть вызваны в любом порядке.
Задача возврата значения:
1). Возвратное значение обработчика событий имеет значение только для обработчика, зарегистрированного через атрибуты. Регистрация возвращаемого значения обработчика событий, установив атрибут Object или атрибут HTML в FALSE - это сказать, что браузер не выполняет операции по умолчанию, связанные с этим событием. Когда браузер хочет перейти на новую страницу, запускается событие OnbeUnload объекта Window. Если его возвратное значение является строкой, оно появится в диалоговом окне подтверждения запроса;
2) .AdDeventListener () или AttachEvent () Зарегистрируйте обработчик событий. Чтобы отменить операцию по умолчанию браузера, вы должны вызвать метод предотвращения () или установить свойство returnValue объекта события.
Это указывает на проблему:
1). Функция прослушивания, указанная методом addeventListener, внутренний этот объект всегда указывает на узел, который запускает событие;
2). Это из функции обработчика событий, зарегистрированной с помощью IE8, и предыдущих методов AttachmentEvent указывают на глобальный объект;
Весь этот объект, записанный следующим образом, указывает на узел элемента.
element.onclick = print;
element.addeventlistener ('Щелкни, печати, ложь)
element.onclick = function () {console.log (this.id);}
<element onclick = "console.log (this.id)">
Этот объект следующим образом указывает на глобальный объект.
element.onclick = function () {dosomething ()};
element.setattribute ('onclick', 'dosomething ()');
<element onclick = "dosomething ()">
element.attachevent ('onclick', dosomething) // ie8
Проблема с памятью: для следующего кода в каждом цикле будет создана новая анонимная функция, и память будет потребляться все больше и больше; Поскольку он не поддерживается на ссылку на анонимную функцию, его нельзя назвать RemoveEventListener; Следовательно, второй слушатель параметров должен соблюдаться в качестве ссылки на функцию события обработки;
for (i = 0; i <els.length; i ++) {els [i] .AdDeventListener ("click", function (e) {/*сделать что -нибудь*/}, false}); }Функции общего назначения инструментов, которые совместимы с более старым IE:
Убедитесь, что эта функция инструмента добавляет обработчик событий, указывает на целевой объект события
функция addEvent (target, type, func) {if (target.addeventListener) {target.addeventListener (type, func, false); } else {target.Attachevent ('on'+type, function (e) {// Функция обработки, зарегистрированная AttachEvent здесь, не связана с ссылкой, поэтому невозможно использовать DepachEvent для удаления return func.call (target, e);}); }}Обработчик общего события (из-за IE8 и предыдущих версий, обработчик Property в качестве целевого события нуждается в Window.Event для получения объекта события, и объект целевого узла, который запускает событие, получено через свойство Event.srcelement).
функция func (event) {var event = event || window.event; var target = event.target || Event.srcelement; //..........ханлер код}4. Распространение событий: это процесс, с помощью которого браузер решает, какой объект запускает его обработчик событий.
Поток событий, указанный в «Событие DOM2 уровня», включает в себя три этапа: Стадия захвата событий ==> на целевой стадии ==> Стадия пузырька событий. Первое, что происходит, - это фаза захвата событий (распространяющаяся от внешнего слоя до внутреннего слоя), которая дает возможность для всех узлов, которые событие проходит к событиям перехвата. Тогда существует фактическое событие приема целевого приема (выполняется в заказах в регистрации). Последней стадией является пузырьковая стадия (пузырящаяся от внутреннего слоя до внешнего слоя).
Когда элементы контейнера и вложенные элементы, то есть, когда обработчики событий вызываются на стадии захвата и на стадии пузырьков: событие выполняет обработчики событий в порядке поток событий DOM, и когда событие находится на целевой стадии, порядок вызовов событий определяется по порядку записи привязывающего события
Если вы хотите, чтобы событие достигло определенного узла и больше не распространяется, есть два способа:
1. Используйте метод Event.stopPropagation () объекта события, чтобы предотвратить распространение текущей функции прослушивания;
2. Используйте метод Event.stopimmediatePropagation () объекта события, чтобы предотвратить распространение всех функций прослушивания текущего события в его объекте события;
Делегирование событий: Поскольку события будут распространяться вверх на родительский узел на стадии пузырька, функция прослушивания детского узла может быть определена на родительском узле, а функция слушания родительского узла может равномерно обрабатывать события нескольких дочерних элементов;
5. Объект события (событие): После того, как событие произойдет, объект события будет генерироваться и передаваться в качестве параметра функции слушания. Браузер изначально предоставляет объект события, и все события являются экземплярами этого объекта или наследуют событие. Прототип объект. Сам объект события является конструктором, который можно использовать для создания новых экземпляров.
var ev = новое событие («Посмотрите», {"Bubbles": true, "Отмена": false});
Document.DispatchEvent (EV);
Конструктор событий принимает два параметра. Первый параметр - это строка, указывающая имя события; Второй параметр - это объект, указывающий на конфигурацию объекта события. Этот параметр может иметь следующие два свойства.
Пузырьки: логическое значение, необязательное, по умолчанию является ложным, указывая, пузырится ли объект события.
Отмена: логическое значение, необязательное, по умолчанию является ложным, указывая, может ли событие быть отменено.
Свойства объекта события:
1. Относится к стадии события:
Пузырьки: свойство только для чтения, возвращает логическое значение, указывая, будет ли текущее событие пузыриться. Различные функции можно назвать на основе того, будет ли событие пузыриться.
EventPhase: возвращает целочисленное значение (одно из 0,1,2,3), что указывает на текущее состояние события
<0, событие еще не произошло.
<1, событие в настоящее время находится на стадии захвата, то есть оно находится в процессе распространения от узла предка до целевого узла. Процесс происходит от объекта Window к узлу документа, затем к узлу HTMLHTMLELEMEMEMENT, пока родительский узел целевого узла.
<2, событие достигает целевого узла, то есть узел, на который указывает целевой атрибут.
<3, событие находится на стадии пузырька, то есть в процессе размножения обратного от целевого узла до узла предка. Этот процесс из родительского узла вплоть до окна объекта. Этот этап может произойти только в том случае, если атрибут пузырьков верен
2. Относительно поведения событий по умолчанию:
Отмена: возвращает логическое значение, указывающее, можно ли отменить событие. Если вы хотите отменить событие, вам нужно позвонить в метод предотвращения
DefaultPrevented: возвращает логическое значение, указывающее, был ли вызван метод предотвращения.
3. Относительно целевого узла события:
CurrentTarget: Возвращает узел, связанный с функцией удаления выполнения события.
Цель: возвращает узел, который вызвал событие. В IE6-IE8 название этого свойства не является целью, а в Srcelement
4. Относительно другой информации о объекте события:
Тип: возвращает строку, представляющую тип события
Подробная информация: возвращает числовое значение, которое представляет некоторую информацию о событии. Конкретное значение связано с типом события. Для событий мыши это означает, что количество раз, когда кнопка мыши нажимается в определенной позиции. Например, для событий DBLCLICK значение атрибута Detail всегда 2.
TimeStamp: возвращает миллисекундную метку времени, указывая время, когда произошло событие. Расчет начинается с executancetiming.navigationStart, что означает время, необходимое пользователю, чтобы перейти на веб -страницу. Если вы хотите преобразовать это значение в временной метки Unix, вам необходимо вычислить event.timestamp + performance.timing.navigationStart
Itrusted: возвращает логическое значение, указывающее, является ли событие заслуживающим доверия. Не очень полезно, поддержка различных браузеров отличается.
Методы объекта события:
Предотвратить DEFORMDEFAULT (): отмените поведение по умолчанию браузера для текущего события. Предпосылка для этого метода вступит в силу, что отменяемое свойство события верно. Если неверно, вызов этого метода не имеет никакого эффекта.
StopPropagation (): завершить событие для дальнейшего распространения во время захвата, целевой обработки или пузырьковой стадии процесса распространения. После вызова этого метода, обработчик на узле, который обрабатывает событие, будет вызван, и событие больше не будет отправлен на другие узлы. ПРИМЕЧАНИЕ. Этот метод не может предотвратить другие управления событиями на одном и том же узле документа, но он может предотвратить отправку событий на другие узлы.
stopmimediatePropagation (): предотвращает вызывание других функций прослушивания на одном и том же событии. Пока одна из функций прослушивания вызывает метод, другие функции прослушивания не будут выполняться снова.
Ссылка на ссылку:
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
Авторитетное руководство JavaScript 6 -е издание
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.