Если вы используете это писать меньше, сделайте больше средств, таких как jQuery, вы неизбежно будете с меньшей вероятностью быть хорошим в Native JS.
Xiaocai на самом деле не хочет писать этот блог, он кажется очень элементарным, но, видя, что она даже не может объяснить обязательство и демонтаж местных событий JS в Интернете, она решила сделать некоторую популярную науку.
Прежде всего, Xiaocai мало что знает, просто поделитесь с вами своими идеями.
DOM0 модель события
Модели событий постоянно развиваются, а модели ранних событий называются уровнем DOM0.
Модель событий DOM0, поддерживаемая всеми браузерами.
Зарегистрирование имени события непосредственно в объекте DOM является методом записи DOM0, например:
Кода -копия выглядит следующим образом:
document.getElementById ("test"). OnClick = function (e) {};
Это означает регистрацию события OnClick. Конечно, это имеет то же значение, что и это письмо:
Кода -копия выглядит следующим образом:
document.getElementbyId ("test") ["onmouseMove"] = function (e) {};
Это ничто, это всего лишь два способа получить доступ к свойствам объекта JS. Форма [] в основном для решения проблемы, что имя атрибута не является законным идентификатором. Например, объект.123 должен сообщить об ошибке, но объект ["123"] избегает этой проблемы. В то же время написание [] также пишет JS живым, используя строки для представления имени атрибута, которое может динамически связывать события во время выполнения.
Вернемся к точке, когда событие запускается, параметр e будет передаваться по умолчанию, чтобы представлять объект события. Через E мы можем получить много полезной информации, такой как координаты щелчка, элемент DOM, который специально запустил событие и т. Д.
На основе событий DOM0, для того же узла DOM, только один может быть зарегистрирован, и то же самое событие, зарегистрированное позже, будет переоценить предыдущие зарегистрированные. Например:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
btn.onmouseMove = function (e) {
оповещение ("OK");
};
btn ["onmouseMove"] = function (e) {
оповещение ("OK1");
};
Результат выведет OK1.
Давайте поговорим об этом в следующем. Когда событие запускается, это относится к тому, какой объект DOM запускается. Например:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
btn.onmouseMove = function (e) {
предупреждение (this.id);
};
Результат выходов теста. Поскольку событие зарегистрировано в узле DOM с помощью теста ID, когда событие запускается, это, конечно, представляет этот узел DOM. Можно понять, что событие называется этим узлом DOM.
Поэтому довольно просто отменить событие. Вам нужно только снова зарегистрировать событие и установить значение NULL, например:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
btn.onclick = function (e) {
оповещение ("OK");
};
btn.onclick = null;
Принцип заключается в том, что последнее зарегистрированное событие должно перезаписать предыдущее. Установите последнее зарегистрированное событие в NULL, которое будет раскрыть мероприятие.
Этот вопрос еще не закончился, и модель событий DOM0 также включает в себя события, написанные непосредственно в HTML. Например:
Кода -копия выглядит следующим образом:
<div id = "test" onclick = "exec ();" > </div>
События, зарегистрированные таким образом, также следуют принципу покрытия, и только один может быть зарегистрирован, и последний вступит в силу.
Разница в том, что событие, зарегистрированное таким образом, эквивалентно динамически вызову функции (в некоторой степени означает), поэтому объект события не будет передаваться. В то же время это указывает на окно и больше не является объектом DOM, который вызывает событие.
DOM2 Event Model
По сравнению с DOM0, Shouca понимает только следующие два момента:
・ Dom2 поддерживает регистрацию нескольких одинаковых событий с одним и тем же элементом DOM.
・ Dom2 добавил концепцию захвата и пузырька.
События DOM2 управляются AddEventListener и RemoveEventListener, конечно, это стандарт.
Тем не менее, IE8 и следующие браузеры создали соответствующие AttactEvent и DepachEvent. Поскольку Xiaocai немного непреднамерен, эта статья не будет обсуждать ее.
AddEventListener, конечно, является регистрационным событием. У него есть три параметра, а именно: «Имя события», «обратный вызов события» и «захват/пузырь». Например:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
btn.addeventlistener ("click", function (e) {
оповещение ("OK");
}, ЛОЖЬ);
Излишне говорить, что имя события не слишком много. По сравнению с DOM0, предыдущий ON просто удален.
Обратные вызовы событий также легко понять. Вы должны уведомить вас, если событие запускается! При вызове, как и DOM0, параметр события будет передаваться по умолчанию. В то же время это относится к узлу DOM, который запускает событие.
Последним параметром является логический тип, True представляет событие захвата, а False представляет событие пузыря. На самом деле, это легко понять. Давайте сначала сделаем диаграмму:
Это означает, что если элемент запускает событие, первое, что уведомляется, это окно, а затем документ, и идет последовательно, пока элемент (целевой элемент), который фактически не запускает событие. Этот процесс захват. Затем событие будет пузыриться из целевого элемента, а затем выйдет в последовательность до окна. Этот процесс пузырь.
Зачем дизайн таким образом? Похоже, это связано с его глубоким историческим происхождением, поэтому Сякай мало что знает об этом, поэтому она не будет говорить глупости.
Из этого мы видим, что событие захвата запускается перед событием пузыря.
Предположим, существует такая HTML -структура:
Кода -копия выглядит следующим образом:
<div id = "test">
<div id = "testinner"> </div>
</div>
Затем мы зарегистрируем два события щелчка на внешнем DIV, а именно событие захвата и событие пузырька, код заключается в следующем:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
// поймать события
btn.addeventlistener ("click", function (e) {
оповещение ("OK1");
}, истинный);
// пузырьковое событие
btn.addeventlistener ("click", function (e) {
оповещение ("OK");
}, ЛОЖЬ);
Наконец, нажмите на внутренний Div, сначала всплывает OK1, затем всплывает ОК. В сочетании с вышеупомянутой схемой, внешний Div эквивалентен телу на рисунке, а внутренний Div эквивалентен нижним Div на рисунке, доказывая, что событие захвата выполняется сначала, а затем выполняется событие пузыря.
Зачем подчеркивать нажимать на внутренний див? Потому что элемент DOM, который действительно запускает событие, должен быть из внутреннего слоя, а элемент DOM внешнего слоя имеет возможность имитировать и захватывать события и события пузырьков, которые можно увидеть с схематической диаграммы.
Что если вы зарегистрируете событие захвата и событие пузырьков на элементе DOM, который фактически запускает событие?
Структура HTML такая же, как и выше, а код JS выглядит следующим образом:
Кода -копия выглядит следующим образом:
var btninner = document.getElementbyId ("testinner");
// пузырьковое событие
btninner.addeventlistener ("click", function (e) {
оповещение ("OK");
}, ЛОЖЬ);
// поймать события
btninner.addeventlistener ("click", function (e) {
оповещение ("OK1");
}, истинный);
Конечно, нажмите на внутренний Div, и результат в том, что OK сначала появляется, затем OK1. Теоретически, событие захвата должно быть инициировано в первую очередь, то есть OK1 появляется первым, но здесь особенное, потому что мы регистрируем событие на элементе DOM, который фактически запускает событие, что эквивалентно регистрации на DIV на рисунке. Из рисунка мы видим, что элемент DOM, который фактически запускает событие, является конечной точкой события захвата и начальной точкой события пузыря, поэтому здесь нет различий между событиями. Который сначала регистрирует, выполняет какой -то первый. В этом примере появление пузырька зарегистрировано первым, так что оно выполняется первым.
Этот принцип относится к нескольким событиям одного и того же вида. Например, если 3 пузырьковых события зарегистрированы одновременно, приказ о выполнении будет находиться в порядке регистрации, первого регистрации и первого выполнения. Например:
Кода -копия выглядит следующим образом:
var btninner = document.getElementbyId ("testinner");
btninner.addeventlistener ("click", function (e) {
оповещение ("OK");
}, ЛОЖЬ);
btninner.addeventlistener ("click", function (e) {
оповещение ("OK1");
}, ЛОЖЬ);
btninner.addeventlistener ("click", function (e) {
оповещение ("OK2");
}, ЛОЖЬ);
Результат, конечно, OK, OK1 и OK2, по очереди.
Чтобы дополнительно понять модель события, есть еще один сценарий. Если внешний Div и внутренний Div зарегистрируют событие захвата одновременно, то при щелчке внутреннего Div событие Внешнего Div должно быть запускается сначала. Код заключается в следующем:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
var btninner = document.getElementbyId ("testinner");
btninner.addeventlistener ("click", function (e) {
оповещение ("OK");
}, истинный);
btn.addeventlistener ("click", function (e) {
оповещение ("OK1");
}, истинный);
В результате OK1 появляется первым.
Если как внешний DIV, так и внутреннее DIV являются зарегистрированными событиями пузырьков, при щелчке внутреннего DIV, в первую очередь должно выполняться внутреннее событие DIV, а принцип одинаков.
Осторожные читатели обнаружит, что для девственного гнездования, если вы нажмете на внутренний Div, внешний Div также запустит событие, которое, кажется, является проблемой!
Click, безусловно, является внутренним Div, но также запускается внешнее событие Div, что действительно является проблемой.
Фактически, когда событие запускается, объект события будет передаваться по умолчанию. Как упоминалось ранее, на этом объекте события есть метод: Stoppropagation. Благодаря этому методу можно предотвратить пузырьки, чтобы внешний DIV не получит события. Код заключается в следующем:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
var btninner = document.getElementbyId ("testinner");
btn.addeventlistener ("click", function (e) {
оповещение ("OK1");
}, ЛОЖЬ);
btninner.addeventlistener ("click", function (e) {
// Остановить пузырьки
e.stoppropagation ();
оповещение ("OK");
}, ЛОЖЬ);
Наконец, я должен поговорить о том, как разрешить инцидент. Синтаксис unevent: btn.removeeventListener («Имя события», «Обратный вызов события», «Capture/Bubble»);
Это то же самое, что параметры события связывания, как подробно описано:
・ Название события означает отменить событие.
・ Обратный вызов события - это функция, которая должна быть такой же, как и функция, которая регистрирует событие.
・ Тип события, логическое значение, это должно соответствовать типу, когда событие зарегистрировано.
Другими словами, имя, обратный вызов и тип вместе решают, какое событие отменить, является незаменимым. Например:
Кода -копия выглядит следующим образом:
var btn = document.getElementbyId ("test");
// хранение обратного вызова в переменной
var fn = function (e) {
оповещение ("OK");
};
// Переплет
btn.addeventlistener ("click", fn, false);
//Удаление
btn.removeeventlistener ("Щелкни", fn, false);
Чтобы зарегистрированное событие было отменено, функция обратного вызова необходимо сохранить, в противном случае его нельзя отменить.
Смешанный DOM0 и DOM2
Вещи уже очень грязные, и это смешанное использование, которое заставляет людей жить. Полем Полем
Не бойтесь, не проблема в том, чтобы использовать его смешанным образом. Модель DOM0 и модель DOM2 каждый следуют своим правилам и не влияют друг на друга.
В целом, нет ничего другого, если он будет зарегистрирован первым и выполняется в первую очередь.
PostScript
На данный момент, нативное событие JS было почти завершено. Сякай только знает это. Читатели могут добавить другие знания.
В реальных приложениях настоящие эксперты не будут тупо зарегистрировать так много событий. Вообще говоря, вам нужно только зарегистрировать событие на самом внешнем элементе DOM, а затем использовать механизм захвата и пузырьков, чтобы найти элемент DOM, который фактически запускает событие, и, наконец, вызовет обратный вызов на основе информации, предоставленной элементом DOM, который вызывает событие.
Другими словами, эксперты сами будут управлять событиями, не полагаясь на браузеры для управления ими, что может повысить эффективность и обеспечить совместимость. Разве это не то, что делает jQuery?
Хорошо, учебник заканчивается здесь, я надеюсь, что это будет полезно для читателей!