В настоящее время распространено мнение, что все должно быть ненавязчивым, что означает, что свойства обработчика событий, такие как someElement.onclick = function(e) { ... };, широко распространены, а атрибуты обработчиков событий, такие как <input type="button" onclick="doSomething()">, полностью отклонены.На самом деле, есть и допустимые варианты использования обоих.
Желание отделить поведение (например, обработчики событий в сценариях) от контента является естественным и основным, но не единственным.Как показано в приведенном ниже резюме, три метода создания обработчиков событий имеют свои преимущества и недостатки, и в конкретной ситуации разделение поведения и содержимого может не быть главной проблемой.
В заключение, дляДля выполнения данной задачи используйте самый простой метод, который соответствует вашим потребностям.
Свойства обработчика событий
Пример
myElement.onclick = function(e) { alert("Clicked"); };
Они особенно полезны для назначения обработчика событийэлемент, который вы создаете в скрипте и который наверняка когда-либо потребует только одного слушателя.
Преимущества
- Отделение поведения от контента
- Работает во всех браузерах с поддержкой скриптов
- Работает одинаково во всех браузерах, за исключением вопроса о происхождении объекта Event (
window.event в IE, параметр функции в других браузерах) - Универсально поддерживаемый метод предотвращения поведения браузера по умолчаниюиспользование
return false
Недостатки
- Позволяет только один слушательдля конкретного объекта и события
- Для элементов в источнике HTML обработчики обычно не назначаются до тех пор, пока документ не загружен
Атрибуты обработчика событий
Пример
<input type="button" value="test" onclick="alert('Clicked');">
Это единственный подход, который работает, когда важно, чтобы элемент реагировал на событие до того, как документ закончил загрузку (см. http://peter.michaux.ca/articles/the-window-onload-problem-still для более подробного обсуждения этого).Кроме того, это самый простой способ добавить обработчики событий.
Преимущества
- Работает во всех браузерах с поддержкой скриптов
- Работает одинаково во всех браузерах
- Работает, как только элемент визуализируется
- Самый простой способ добавить обработчик событий
- Универсально поддерживаемый метод предотвращения поведения браузера по умолчанию с использованием
return false - На очень простомстраница, это наиболее читаемый метод
- Стандартизирован в спецификации HTML 4
Недостатки
- Смешивает поведение с контентом
- Разрешает только один прослушиватель для конкретного объекта и события
addEventListener / attachEvent
Пример (эквивалент attachEvent не показан)
myElement.addEventListener("click", function(e) { alert("Clicked"); }, false);
Это единственный метод, который позволяет подключить несколько слушателей к определенному событию на конкретном объекте.addEventListener стандартизировано в спецификации DOM Level 2 Events .
Преимущества
- Отделяет поведение от содержимого
- Разрешает несколько прослушивателей событий
addEventListener - это современный стандарт с поддержкой в IE 9, означающий, что все текущие основные браузеры будут поддерживать при выпуске IE 9
Недостатки
- Немного сложный для правильной реализации кросс-браузер
- IE
attachEvent не совсем эквивалентен addEventListener - Для элементов в источнике HTML обработчики обычно не назначаются, пока документ не загружен