Связанные показания:
JavaScript Event Superaint Support (v) Тип событий мыши в JS
//www.vevb.com/article/86259.htm
JavaScript Event Superaint Support (i) Поток событий
//www.vevb.com/article/86261.htm
JavaScript Event Learning Redugary (IV) Общественные члены событий (свойства и методы)
//www.vevb.com/article/86262.htm
JavaScript Event Superaint Support (II) Обработчик событий JS
//www.vevb.com/article/86264.htm
JavaScript Event Superaint Support (III) JS -объект события
1. Обработчик событий
Как упоминалось ранее, события - это некоторые действия, выполняемые самим пользователем или браузером, такие как Click, Load и MouseOver, являются именами событий. Функция, которая отвечает на определенное событие, называется обработчиком событий (также называется обработчиком событий, обработчиком событий). Название обработчика событий начинается с «On», поэтому обработчик событий события Click - OnClick, а обработчик событий события загрузки не загружается.
Существует три основных способа указать обработчики событий для событий.
1. HTML -обработчик событий
Прежде всего, этот подход устарел. Потому что действия (код JavaScript) и контент (HTML -код) тесно связаны. Но его все еще можно использовать при написании небольшой демонстрации.
Есть два способа сделать это, оба из которых очень просты:
Первый тип: непосредственно определить обработчик событий и включенные действия в HTML.
Копия кода следующим образом: <input type = "button" value = "Нажмите меня!"/>
Второй тип: определяет обработчик событий в HTML, и выполненные действия вызывают сценарий, определенный в другом месте.
Копия кода выглядит следующим образом: <input type = "button" value = "Нажмите меня!"/> <Script> function showmessage () {alert ("clicked!");} </Script>
примечание:
1) Через переменную события вы можете напрямую получить доступ к самому событию. Например, onclick = "alert (event.type)" будет всплыть на событие Click.
2) Это значение равно целевому элементу события, где целевой элемент вводится. Например, onclick = "alert (this.value)" может получить значение значения входного элемента.
2. Обработчик событий DOM0 уровня
Этот метод прост и кросс-браузазер, но может добавить только обработчик событий к одному элементу.
Поскольку этот метод добавляет несколько обработчиков событий к элементам, следующее будет переопределять предыдущий.
Добавить обработчик событий:
<input type = "button" value = "Нажмите меня!" onclick = "showmessage ()"/> <script> function showmessage () {alert ("clicked!");} </script>Удалить обработчик событий:
Кода -копия выглядит следующим образом: mybtn.onclick = null;
3. Обработчик событий DOM2 уровня
Обработчики событий на уровне DOM2 могут добавить несколько обработчиков событий в один элемент. Он определяет два метода для добавления и удаления обработчиков событий: addeventListener () и removeEventListener ().
Оба метода требуют 3 параметров: имя события, функция обработчика событий и логическое значение.
Это логическое значение верно, и это событие обрабатывается на стадии захвата, False, а событие обрабатывается на стадии пузыря, которая по умолчанию по умолчанию.
Добавьте обработчик событий: теперь добавьте две обработчики событий для кнопки, один появляется «Hello», а другой появляется «мир».
<input id = "myBtn" type = "button" value = "Нажмите меня!"/> <Script> var myBtn = document.getElementById ("myBtn"); mybtn.addeventlistener ("click", function () {alert ("hello");}, false); mybtn.addeventlistener ("click", function () {alert ("world");}, false); </script>Удалить обработчик событий: обработчик событий, добавленный через AddEventListener, должен быть удален с помощью RemoveEventListener, а параметры согласованы.
ПРИМЕЧАНИЕ. Анонимная функция, добавленная через AddEventListener, не будет удалена. Следующий код не будет работать!
Кода кода выглядит следующим образом: myBtn.RemoveEventListener ("click", function () {alert ("world");}, false);
Похоже, что RemoveEventListener согласуется с параметром AddEventListener выше, но на самом деле анонимная функция во втором параметре совершенно отличается.
Поэтому, чтобы удалить обработчик событий, код может быть написан так:
<input id = "myBtn" type = "button" value = "Нажмите меня!"/> <Script> var myBtn = document.getElementById ("myBtn"); var handler = function () {alert ("hello"); } myBtn.AddeventListener ("click", Handler, false); myBtn.RemoveEventListener ("Щелкни", обработчик, false); </script>2. IE обработчик событий
1. Практические сценарии применения
IE8 и ниже браузеры не поддерживают AddEventListener. Если вы хотите быть совместимым с IE8 и ниже браузеров в реальной разработке. Если вы используете нативные события привязки и должны быть обработаны совместимыми, вы можете вместо этого использовать jQuery Bind.
2. IE8 Привязка событий
IE8 и следующие браузеры реализуют два аналогичных метода, как в dom: adticeEvent () и detachevent ().
Оба метода требуют два параметра: имя обработчика событий и функция обработчика событий.
примечание:
IE11 только поддерживает AddEventListener!
IE9 и IE10 Поддержка AttachEvent и AddEventListener!
TE8 и ниже только поддерживают AttactEvent!
Вы можете использовать следующий код для тестирования его в различных браузерах версий IE.
<input id = "myBtn" type = "button" value = "Нажмите меня!"/> <Script> var myBtn = document.getElementById ("myBtn"); var handlerie = function () {alert ("helloie"); } var handlerdom = function () {alert ("hellodom"); } myBtn.AddeventListener ("click", Handlerdom, false); mybtn.attachevent ("onclick", Handlerie); </script>Добавьте обработчик событий: теперь добавьте две обработчики событий для кнопки, один появляется «Hello», а другой появляется «Мир»
<script> var myBtn = document.getElementById ("myBtn"); mybtn.attachevent ("onclick", function () {alert ("hello");}); mybtn.attachevent ("onclick", function () {alert ("world");}); </script>ПРИМЕЧАНИЕ. Стоит отметить операционный эффект:
«Мир» появляется сначала в браузерах ниже IE8, а затем «Привет». Порядок событий, запускающий в DOM, противоположный.
IE9 и выше браузеры сначала появляются «Привет», а затем всплывают «мир». Тот же порядок, что и событие, вызвавшее в DOM.
Видно, что IE Browser постепенно попадает на правильный путь. Полем Полем
Удалить обработчик событий: обработчик событий, добавленный через AttactEvent, должен быть удален с помощью метода отделения, а параметры согласованы.
Как и событие DOM, добавленные анонимные функции не будут удалены.
Поэтому, чтобы удалить обработчик событий, код может быть написан так:
<input id = "myBtn" type = "button" value = "Нажмите меня!"/> <Script> var myBtn = document.getElementById ("myBtn"); var handler = function () {alert ("hello"); } myBtn.Attachevent ("onclick", Handler); mybtn.detachevent ("onclick", Handler); </script>Примечание : есть еще одно место, на которое можно обратить внимание на обработчик событий IE: Scope.
Используя метод AttachEvent (), обработчик событий работает в глобальной области, так что это равна окну.
Объем метода на уровне DOM2 или DOM0 находится внутри элемента, и это значение является целевым элементом.
Следующий пример будет появляться правдой.
<input id = "myBtn" type = "button" value = "Нажмите меня!"/> <Script> var myBtn = document.getElementById ("myBtn"); mybtn.attachevent ("onclick", function () {alert (this === window);}); </script>Это то, что следует помнить при написании Cross-Browser Code.
IE7/8 Обнаружение:
// Судья IE7/8 Обнаружение совместимости var Isie = !! windact.activexobject; var isie6 = isie &&! window.xmlhttprequest; var isie8 = isie && !! document.documentmode; var isie7 = isie &&! isie6 &&! Isie8; if (isie8 || isie7) {li.attachevent ("onclick", function () {_marker.openinfowindow (_iw);})} else {li.addeventlistener ("click", function () {_marker.openinfowindow (_iw);Выше приведено соответствующее знание об обучении событий JavaScript (II) обработчика событий JS, который редактор представил вам. Я надеюсь, что это будет полезно для всех!