Javascript Event Обработка: глубокое понимание это механизм обработки ключевого слова и событий

]

эффективные клиентские веб -приложения не могут быть отделены от механизма обработки событий JavaScript. События позволяют JavaScript обнаруживать поведение пользователей, например, нажатие мыши, нажатие на ссылки, прокрутка страниц, изменение размера окна, перетаскивание объектов и т. Д. Ваш код JavaScript может зарегистрировать обработчик событий, который запускает при возникновении конкретного события. Большинство браузеров будут передавать единый объект, содержащий информацию о событии в функцию, такую ​​как ключевая информация, позиция курсора мыши и т. Д. Затем вы можете выполнить определенные действия, такие как элементы анимации, инициирование запроса AJAX, или блокировать поведение по умолчанию браузера. Кроме того, это также может быть установлено ключевое слово . Как правило, это указывает на элемент, который запускает событие, но это не всегда так. ]

избегает использования встроенных обработчиков событий ]

inline Handlers (например,

нажмите меня ]) просты, но имеют много недостатков: они очень ограничительны, неуклюжи и могут раздувать код HTML. Поскольку вызовы событий и обработчик определяются в разных местах, это сложно поддерживать. Наконец, поскольку события могут быть вызваны при загрузке страницы, теги сценария должны быть размещены в верхней части HTML, а не внизу. ]

традиционное событие Dom0

] традиционные методы обработки событий (например,

link.onclick = EventHandler;

) может быть назначен только один обработчик на тип события. Примечание: не используйте link.onclick = eventHandler (); , это немедленно выполнит функцию eventHandler и назначить возвращаемое значение (не определенное) для onclick атрибута #link node. Это не сообщит об ошибке, но ваш обработчик никогда не будет вызван, когда произойдет событие Click. ]

Modern Dom2 Events

] Современная обработка событий позволяет указать несколько обработчиков для одного и того же события. Однако из -за некоторых различий в реализации между Microsoft и W3C, только IE9 и выше поддерживает

addEventListener ()

. Мы можем использовать обнаружение объекта для создания дополнительной функции события поперечного браузера: ] atchentevent (ссылка, "click", eventhandler); Функция AttachEvent (элемент, тип, обработчик) { if (element.addeventlistener) element.addeventListener (type, handler, false); else element.attachevent ("on" type, Handler); }

]

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

this

как элемент, который запускает событие ... кроме IE8 и ниже. В IE8 и ниже, это всегда глобальное window объект. К счастью, мы можем определить целевой элемент из объекта события: ] function eventHandler (e) { E = E || window.event; var target = e.target || E.srcelement; console.log (Target); }

]

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

значение ключевого слова

this в javaScript Event Handler ]]

это

ключевое слово относится к контексту, в котором вызывается функция. В обработчике событий это обычно указывает на элемент HTML, который прикрепляет обработчик событий. Это позволяет вам получить доступ и манипулировать элементами напрямую. ]

Как использовать

this ] в обработчике событий с использованием

this

просто, как использование других переменных. Помните, это указывает на элемент HTML прикрепленного обработчика событий. ]

различные типы событий в Javascript

] Javascript поддерживает несколько событий, таких как

click

, mouseover , mouseout , keydown , keyup , загрузки unluct , . ]

как прикрепить обработчик события к элементу ]

вы можете прикрепить обработчик события к элементу, используя метод

addeventListener . Этот метод принимает два параметра: имя события, которое нужно прослушать, и функция для работы при возникновении события. ]

объект события в Javascript

объект события - это специальный объект, созданный при возникновении события. Этот объект содержит информацию о событиях, такой как тип события, целевой элемент, время возникновения событий и т. Д. Вы можете получить доступ к объектам событий в функциях обработчика событий.

]