Чтение онлайн

на главную - закладки

Жанры

JavaScript. Подробное руководство, 6-е издание
Шрифт:

Метод

remove
удаляет также все обработчики событий (раздел 19.4) и другие данные (раздел 19.2.7), которые могли быть связаны с удаляемыми элементами. Метод
detach
действует подобно методу
remove,
но не удаляет обработчики событий и данные. Метод
detach
может оказаться удобнее, когда элементы требуется удалить из документа на время и позднее вставить их обратно.

Наконец, метод

unwrap
выполняет удаление элементов способом, противоположным тому, каким действует метод wrap или
wrapAll:
он удаляет родительский элемент каждого выбранного элемента, не оказывая влияния на выбранные элементы и их братские элементы. То есть для каждого выбранного элемента
он замещает родителя этого элемента его дочерними элементами. В отличие от методов
remove
и
detach,
метод
unwrap
не принимает необязательный аргумент с селектором.

19.4. Обработка событий с помощью библиотеки jQuery

Как мы узнали в главе 17, одна из сложностей, связанных с обработкой событий, состоит в том, что в IE (до версии IE9) реализована модель событий, отличающаяся от модели событий в других броузерах. Чтобы решить эту проблему, в библиотеке jQuery определяется собственная унифицированная модель событий, которая одинаково работает во всех броузерах. В простейших случаях модель jQuery API оказывается проще в использовании, чем стандартная модель или модель IE. В более сложных случаях модель jQuery предоставляет более широкие возможности, чем стандартная модель. Все дополнительные подробности описываются в следующих подразделах.

19.4.1. Простые методы регистрации обработчиков событий

Библиотека jQuery определяет простые методы регистрации обработчиков для всех наиболее часто используемых событий, поддерживаемых всеми броузерами. Например, чтобы зарегистрировать обработчик события «click», достаточно просто вызвать метод

click:

// Щелчок на любом элементе <р> окрашивает его фон в серый цвет

$("p").click(function { $(this).css("background-color", "gray"); });

Вызов метода объекта

jQuery
регистрации обработчика событий зарегистрирует указанный обработчик во всех выбранных элементах. Обычно это проще, чем регистрировать один и тот же обработчик во всех элементах по отдельности с помощью метода addEventListener или attachEvent.

Библиотека jQuery определяет следующие простые методы регистрации обработчиков событий:

Большая часть этих методов регистрации обработчиков наиболее часто используемых типов событий уже знакомы вам по главе 17. Тем не менее необходимо сделать несколько замечаний. События «focus» и «blur» не всплывают, в отличие от всплывающих событий «focusin» и «focusout», и библиотека jQuery гарантирует, что эти события будут работать во всех броузерах. События «mouseover» и «mouseout», наоборот, всплывают, и это часто доставляет неудобства, так как сложно определить -указатель мыши покинул интересующий нас элемент или событие было доставлено от одного из потомков. События «mouseenter» и «mouseleave» не всплывают, что решает данную проблему. Эти типы событий впервые появились в IE, но библиотека jQuery гарантирует, что они корректно будут работать во всех броузерах.

События «resize» и «unload» возбуждаются только в объекте

Window
, поэтому, если потребуется зарегистрировать обработчики этих типов событий, методы
resіze
и
unload
следует вызывать относительно
$(window).
Метод
scroll
часто вызывается относительно
$(window)
, но его также можно вызывать относительно любых элементов, имеющих полосы прокрутки (например, относительно элементов, в которых CSS-атрибут
overflow
имеет значение «scroll» или «auto»). Метод
load
может вызываться относительно
$(window)
, для регистрации обработчика события «load» окна, но обычно проще бывает передать свою функцию инициализации непосредственно функции
$
, как показано в разделе 19.1.1. При этом метод
load
с успехом можно использовать в элементах
<iframe>
и
<img>
. Обратите внимание, что при вызове метода
load
с различными аргументами он также может использоваться для загрузки нового содержимого (по протоколу HTTP) в элемент (раздел 19.6.1). Метод
error
можно использовать с элементами
<img>
для регистрации обработчиков неудачи загрузки изображения. Он не должен использоваться для установки свойства
onerror
объекта
Window
, описанного в разделе 14.6.

В дополнение к этим простым методам регистрации обработчиков событий существует две специальные формы методов, которые могут иногда пригодиться. Метод

hover
регистрирует обработчики событий «mouseenter» и «mouseleave». Вызов
hover(f,g)
по своему действию аналогичен двум последовательным вызовам методов
mouseenter(f)
и
mouseleave(g).
Если методу
hover
передать единственный аргумент, он будет использоваться как обработчик обоих событий.

Другим специальным методом регистрации обработчиков событий является метод

toggle.
Этот метод регистрирует функцию обработчика события «click». Вы можете указать две или более функции обработчиков, и библиотека jQuery будет вызывать их всякий раз, когда будет возникать событие «click». Если, например, вызвать этот метод как
toggle(f,g,h),
функция
f
будет вызываться для обработки первого события «click»,
g
– второго,
h
– третьего и снова
f
– для обработки четвертого события «click». Будьте внимательны при использовании метода
toggle:
как будет показано в разделе 19.5.1, этот метод может также использоваться для отображения и скрытия (т. е. для переключения видимости) выбранных элементов.

В разделе 19.4.4 мы познакомимся с другими, более обобщенными способами регистрации обработчиков событий и завершим этот раздел описанием еще одного простого и удобного способа регистрации обработчиков.

Напомню, что создавать новые элементы можно с помощью функции

$
, передавая ей строку с разметкой HTML и объект (во втором аргументе) с атрибутами, которые должны быть установлены во вновь созданном элементе. Второй аргумент может быть любым объектом, который допускается передавать методу
attг.
Но кроме того, если имя какого-либо из свойств совпадает с именем метода регистрации обработчиков событий, перечисленных выше, значение этого свойства будет интерпретироваться как функция-обработчик и зарегистрировано как обработчик данного типа события. Например:

$("<img/>", {

src: image_url,

alt: image_description,

className: "translucent_image",

click: function { $(this).css("opacity", "50%"): }

});

19.4.2. Обработчики событий в библиотеке jQuery

Функции обработчиков событий в примерах выше не имеют ни аргументов, ни возвращаемых значений. В целом это нормально для подобных обработчиков событий, но библиотека jQuery передает каждому обработчику событий один или более аргументов и анализирует значения, возвращаемые ими. Самое главное, что следует знать, - каждому обработчику событий библиотека jQuery передает в первом аргументе объект события. Поля этого объекта содержат дополнительную информацию о событии (такую как координаты указателя мыши). Свойства стандартного объекта

Event
были описаны в главе 17. Библиотека jQuery имитирует стандартный объект
Event
даже в броузерах (таких как IE версии 8 и ниже), не поддерживающих его, и объекты событий в библиотеке jQuery имеют одинаковые наборы полей во всех броузерах. Подробнее об этом рассказывается в разделе 19.4.3.

Поделиться:
Популярные книги

Слезы Эйдена 1

Владимиров Денис
11. Глэрд
Фантастика:
боевая фантастика
фэнтези
попаданцы
5.00
рейтинг книги
Слезы Эйдена 1

Личный аптекарь императора. Том 2

Карелин Сергей Витальевич
2. Личный аптекарь императора
Фантастика:
городское фэнтези
попаданцы
аниме
5.00
рейтинг книги
Личный аптекарь императора. Том 2

Цикл романов "Целитель". Компиляция. Книги 1-17

Большаков Валерий Петрович
Целитель
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Цикл романов Целитель. Компиляция. Книги 1-17

Гром Раскатного. Том 3

Володин Григорий Григорьевич
3. Штормовой Предел
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Гром Раскатного. Том 3

Бастард Императора. Том 10

Орлов Андрей Юрьевич
10. Бастард Императора
Фантастика:
городское фэнтези
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Бастард Императора. Том 10

Последний Паладин. Том 7

Саваровский Роман
7. Путь Паладина
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Последний Паладин. Том 7

Ученик. Книга вторая

Первухин Андрей Евгеньевич
2. Ученик
Фантастика:
фэнтези
5.40
рейтинг книги
Ученик. Книга вторая

Князь Андер Арес 5

Грехов Тимофей
5. Андер Арес
Фантастика:
историческое фэнтези
фэнтези
героическая фантастика
5.00
рейтинг книги
Князь Андер Арес 5

Последний Паладин. Том 12

Саваровский Роман
12. Путь Паладина
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Последний Паладин. Том 12

Гримуар темного лорда II

Грехов Тимофей
2. Гримуар темного лорда
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Гримуар темного лорда II

Вперед в прошлое 3

Ратманов Денис
3. Вперёд в прошлое
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Вперед в прошлое 3

Бояръ-Аниме. Газлайтер. Том 30

Володин Григорий Григорьевич
30. История Телепата
Фантастика:
альтернативная история
аниме
фэнтези
5.00
рейтинг книги
Бояръ-Аниме. Газлайтер. Том 30

Я граф. Книга XII

Дрейк Сириус
12. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я граф. Книга XII

Наследник

Майерс Александр
3. Династия
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Наследник