JavaScript Event Superaint Support (II) Обработчик событий JS

Связанные показания:

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, который редактор представил вам. Я надеюсь, что это будет полезно для всех!