Как прослушивать события клавиатуры в Angular основы использования псевдо-событий

Как прослушать событие mousemove для объекта Document в Angular

Я реализую функцию перетаскивания в угловое приложение: http://jsfiddle.net/Jjgmz/1/

Часть этого заключается в прослушивании события mousemove для объекта документа.

Как я могу прослушать объект документа внутри компонента?

Представим, что это содержимое файла component.html:

Я использую Angular 4.

1 ответ

1) Использование @HostListener ( docs ). Это предпочтительный метод, которого должно быть достаточно в большинстве случаев.

2) Как и выше, вы также можете использовать (document:event)=»handler» для любого элемента DOM, но вышеупомянутое решение предпочтительнее, потому что код чище. Используя это, из класса не сразу видно, что у вас есть глобальный прослушиватель событий, и вы можете добавлять дополнительные без необходимости.

3) Renderer ( docs ) — решение более низкого уровня; полезно, когда вы не хотите загромождать свой код методами, но имеете дело с даже в другом месте, например, в ловушке, как показано в следующем фрагменте. Будьте осторожны, так как вам все еще нужно удалить прослушиватель событий, чтобы предотвратить утечки памяти; либо делайте это, когда вы знаете, что вам это больше не понадобится, либо в хуке OnDestroy.

4) Альтернативой первого примера является свойство хоста , которое не рекомендуется в Руководстве по угловым стилям, поскольку теперь вы отслеживаете имя функции в двух местах, которые в коде могут очень сильно отличаться друг от друга физически. Предпочитаю первую версию, когда это возможно.

Как прослушивать события клавиатуры в Angular: основы использования псевдо-событий

Отдельная группа директив связана с обработкой пользовательских событий. Рассмотрим директиву ng-click , которая фактически будет эквивалентна обработке события onclick в javascript. Вначале создадим небольшой проект. Все знают сервис stackoverflow, где задаются вопросы и можно проголосовать за понравившийся ответ. Сделаем что-то подобное.

Вначале создадим новый файл QuestionController.js , в котором определим контроллер QuestionController:

Здесь через объект $scope на веб-страницу передается сложный объект question, в котором определены название вопроса, автор, дата и набор ответов со своими параметрами, в том числе с рейтингом (rate). Кроме того, у нас объявлены две функции, которые уменьшают и увеличивают рейтинг переданного ответа.

Кроме того, объявлен специальный объект questColorClass, который будет хранить класс, и функция changeClass, которая меняет класс в зависимости от типа события.

Теперь перейдем к коду html. Он будет выглядеть следующим образом:

Для каждого объекта answer (то есть ответа) у нас создается блок vote, в котором есть две ссылки. При нажатии на каждую ссылку срабатывает функция, на которую указывает директива ng-click : . И в каждую функцию передается текущий объект answer. Таким образом, можно увеличивать и уменьшать рейтинг.

Для объекта вопроса устанавливается обработчик событий ng-mouseenter и ng-mouseleave : ng-mouseenter=»changeClass($event)» . Здесь уже в качестве параметра в функцию обработчика передается специальный объект $event , который может использоваться для обработки любого события и который несет в себе информацию об обрабатываемом событии.

В подключемом на веб-страницу файле стилей mystyles.css определим ряд классов, в том числе классы, которые будут переключаться в обработчике события changeClass:

В качестве изображения стили используют небольшой спрайт с двумя стрелочками внизу и вверх. В итоге проект будет выглядеть следующим образом:

В итоге визуально веб-страница будет выглядеть так:

Кроме директивы ng-click , предназначенной для обработки кликов по элементам, имеется еще ряд директив:

ng-blur : определяет поведение для события blur , которое возникает при потере элементом фокуса

ng-focus : определяет поведение для события focus , которое возникает при получении фокуса элементом

ng-change : определяет поведение для события change , которое возникает при изменении элементом состояния, например, при нажатии на элемент input type=»checkbox»

ng-submit : определяет поведение для события submit , которое возникает при отправке формы

ng-copy/ng-cut/ng-paste : определяет поведение для событий копирования, вырезки и вставки соответственно

ng-dblclick : та же ng-click, только обрабатывается двойное нажатие

ng-mousedown : для обработки нажатия клавиши мыши

ng-mouseup : для обработки отжатия мыши

ng-mouseenter : для обработки наведения курсора в определенную область

ng-mouseleave : для обработки ухода курсора с определенной области

ng-mousemove : для обработки перемещения курсора мыши

ng-keydown : обработка нажатия клавишы клавиатуры

ng-keypress : обработка нажатия клавишы клавиатуры

ng-keyup : обработка отжатия клавишы клавиатуры

javascript — Как прослушать событие в компоненте AngularJS?

В AngularJS мы можем транслировать и прослушивать события:

Есть ли способ прослушать события внутри компонента?

То, что я хочу достичь, — это выполнить некоторые действия над множеством компонентов, которые повторяются внутри формы. Ng-повтор повторяется по какой-то модели, конечно. Некоторые данные модели привязаны к компоненту. Легко привязать функцию к компоненту, поэтому компонент может выполнять некоторую логику, но противоположное направление не кажется таким простым.

2 2
• 14 май 2020 2020-05-14 09:57:39
• Landeeyo

2 ответа

Вы можете передать $ event в качестве параметра для функции

Результатом будет [объект MouseEvent]

• 14 май 2020 2020-05-14 09:57:40
• Wintergreen

Я думаю, что ваш лучший выбор — использовать стандартное событие, излучающее $emit() и $broadcast() . Начиная с angualr 1.5, были введены новые крючки и синтакс, но внутри компонента вы всегда можете вводить $rootScope и $scope и обрабатывать любые события, как вы привыкли в угловом $doCheck который запускает каждый цикл дайджеста, в отличие от старый механизм часов, вы должны сохранить свою старую ценность и сравнить ее с новой.

Как прослушивать события клавиатуры в Angular: основы использования псевдо-событий

24 просмотра

2 ответа

24 Репутация автора

Я пытаюсь передать данные от одного компонента другому, но я не знаю, как это сделать.

(Я хочу передать данные из sidenav в Компонент маршрутизации.) Я начал с использования @input, но мои компоненты не являются родительскими. У меня есть компонент макета, который включает заголовок навигации, боковую навигацию и содержимое маршрутизации. Я также пробовал localStorage, но данные, передаваемые моему contentComponent, не очень хорошие. Я нажимаю на элемент из sidenav и хочу передать эти данные в компонент routingComentent, чтобы запросить API в соответствии с этими данными. Когда я нажимаю на элемент, я загружаю другие элементы в боковую панель, и я хочу передать их, выбрасывая новый список элементов (то есть загружается, когда я загружаю contentComponent). Я не знаю, как передать новый предмет там.

то, что я хочу передать, это загрузить в конце функции (подписаться). Но я не знаю, как с этим бороться. Я только что передал старое значение, выбранное для локального хранилища. Я не знаю, достаточно ли я ясен. Я могу попытаться объяснить лучше, если вы запутались. Спасибо за помощь

Ответы (2)

плюса

8432 Репутация автора

просто другой компонент должен иметь свойство типа eventemitter и декорироваться @Output декоратором

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

Информационный портал по безопасности

События в Angular Light

Angular Light — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js.

В Angular Light есть директивы обработки событий: al-click, al-dblclick, al-submit, al-blur, al-change, al-focus, al-keydown, al-mousedown, al-mouseenter и т.д. Как видите под каждое отдельное событие создается отдельная директива, а если директивы нет под какое-то событие, то приходилось делать директиву вручную и это не эффективно. Поэтому было принято решение сделать возможность обрабатывать любые события одним способом. Рассматривались разные варианты (например al-on=»keypress=onclick($event,$element), mousedown=onMouseMove()» ), в итоге остановились на варианте, который используется (или похож) в других фреймворках.

И сокращенный вариант:

Так же можно использовать модификторы, которыми можно фильтровать события, делать альясы или менять их поведение, пример:

Для событий keydown, keypress, keyup доступны такие модификаторы: enter, tab, delete, backspace, esc, space, up, down, left, right либо можно указать любой код числом. И доп. клавиши: alt, ctrl (или control), shift, meta. В итоге можно сделать такой пример без дополнительного js.

Для всех событий доступны модификаторы: stop (вызывает stopPropagation), prevent (вызывает preventDefault), noscan (отменяет вызов $scan для события).

throttle и debounce

Также среди модификаторов есть throttle и debounce, теперь любое событие можно сделать «отложенным», примеры:

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

Пользовательские модификаторы

Если стандартных модификаторов не хватает, то можно сделать свои. Пример модификатора который выполняет роль алиаса событий, т.е. объединяет события keydown и blur в один myevent:

Пример модификатора как фильтр, которое срабатывает при нажатии Enter:

Такой модификатор можно использовать как фильтр — пример , либо как псевдо событие — пример .

Кроме того можно интегрировать любые дополнительные библиотеки, например библиотека touch событий Hammer.js, события tap и pan, пример .

Так же появились универсальная обработка атрибутов, шаблонов, бета версия компонент и роутера в стиле reactjs, и ещё много разных мелочей, но это в следующих статьях.

Связующие события клавиатуры в AngularJS

Что такое идеальный способ связать клавиатуры события нажатия клавиш, если вы используете AngularJS?

Сейчас я устанавливаю отображение событий клавиатуры внутри контроллера .

Я начинаю думать, что есть лучшая практика, когда дело доходит до прикрепления событий клавиатуры внутри из AngularJS приложения.

Должен ли я использовать element.bind и настройку событий клавиатуры внутри соответствующих директив вместо?

Заранее спасибо за вашу помощь!

Где вы пытаетесь захватить эти события? Является ли это в глобальном масштабе или просто что-то конкретное?

Вот пример того, ограничивающее поле ввода даты ключей.

Тогда вы просто украсить свой входной тег как

Как прослушать событие в компоненте AngularJS?

В AngularJS мы можем транслировать и прослушивать события:

Есть ли способ прослушать события внутри компонента?

То, что я хочу достичь, — это выполнить некоторые действия над множеством компонентов, которые повторяются внутри формы. Ng-повтор повторяется по какой-то модели, конечно. Некоторые данные модели привязаны к компоненту. Легко привязать функцию к компоненту, поэтому компонент может выполнять некоторую логику, но противоположное направление, похоже, не так просто.

Как прослушивать событие в компоненте AngularJS?

В AngularJS мы можем транслировать и прослушивать событие:

Есть ли способ для прослушивания событий внутри компонента?

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

Я думаю , что вам лучше всего продолжать использовать стандартное событие , излучающий с $emit() и $broadcast() . От angualr 1.5, некоторые новые крючки и синтаксис были введены , но внутри компоненты всегда можно вводить $rootScope и $scope , и обработку событий , как вы привыкли в угловом $doCheck который срабатывает каждый переваривать цикл, в отличии от старого часовой механизм необходимо сохранить старое значение и сравнить его с новым.

Для прослушивания события в AngularJs, использовать обработку событий директивы как нг-клик, нг-изменение и т.д. Это будет полностью зависеть от типа события вы хотите захватить. Для Ex:

Внутри вашего компонента tmeplate добавьте ниже HTML.

Определение функции внутри класса компонента.

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

Блог Makeomatic: разработка сайтов и мобильных приложений

Разбираемся с системой событий $emit, $broadcast и $on в $scope и $rootScope Ангуляра

$emit , $broadcast и $on Ангуляра попадают под общий концепт “publish/subscribe”, так же называемый “могу сделать”, в которой вы публикуете событие и подписываетесь/отписываетесь от него еще где-то. Система событий в AngularJS великолепна, что делает вещи безупречными и легкими в исполнении (как и следовало ожидать!), но концепт, который стоит за этой простотой не так легок для освоения в совершенстве, поэтому очень часто у вас будет возникать недоумение по поводу того, почему все работает не так, как вы думаете.

Для тех, кому работа с Ангуляром в новинку, и кто не использовал или не видел $emit , $broadcast или $on , поясним, что они делают, перед тем, как мы рассмотрим $scope и $rootScope отношения событий, областей видимости и того, как корректно применить данную систему событий, а так же поймем, что же действительно происходит.

$scope.$emit вверх, $scope.$broadcast вниз

Используя $scope.$emit — событие запускается вверх по области видимости. Используя $scope.$broadcast — событие запускается вниз по области видимости. Когда мы используем $scope.$on — мы “подписываемся” на прослушивание данных событий. Быстрый пример:

$scope.($emit/$broadcast)

Ключевой момент для запоминания при использовании $scope для запуска ваших событий — это то, что они будут коммуницировать только с непосредственной родительской областью видимости или с ближайшими потомками! При этом области видимости не всегда потомки или родители: у нас могут быть “братские” области видимости, к примеру, с одним и тем же родителем. Используя $scope для запуска, мы пропустим такие области видимости и запустим его лишь вниз или вверх, но никогда не по сторонам.

Самый простой путь имитации родительских и дочерних областей видимости — использовать контроллеры. Каждый контроллер создает новый $scope , который Ангуляр аккуратно выводит для нас в виде класса ng-scope на элементах, с новыми областями видимости:

Мы могли бы запустить событие вниз из ParentCtrl в SiblingOneCtrl , используя $broadcast :

Если бы мы захотели передать сигнал вверх, из SiblingOneCtrl в ParentCtrl , как вы уже догадались, вы можете использовать $emit .

Чтобы продемонстрировать как $scope работает, в момент запуска события, вот простая иерархия:

Если SiblingTwoCtrl запустил $scope.$broadcast , тогда SiblingOneCtrl никогда не узнает, что случилось. Это может быть помехой, ее можно исправить, поставив небольшой костыль:

$scope.$parent.$broadcast(‘myevent’, ‘Some data’);

Данный код обращается к ParentCtrl и уже оттуда запускает событие через $broadcast

$rootScope.($emit/$broadcast)

Если вам все еще просто, то давайте добавим $rootScope . $rootScope — родительский элемент всех областей видимости, который делает каждый вновь созданный $scope его потомком! Выше я упомянул о том, как $scope ограничен в направлениях распространения событий, а вот $rootScope — это то, как мы можем с легкостью передавать сигнал через все области видимостей. Данный подход будет решать некоторые проблемы с большей легкостью. К сожалению, все не настолько просто, как с передачей событий вверх или вниз…

$rootScope.$emit против $rootScope.$broadcast

Объект $rootScope имеет аналогичные методы $emit , $broadcast и $on , но они работают немного иначе, нежели в $scope . Так как $rootScope не имеет $parent (родительской области видимости), использование $emit было бы бессмысленным. Вместо этого $rootScope.$emit запустит событие только для слушателей, подписанных через $rootScope.$on . Самое интересное в том, что $rootScope.$broadcast уведомит как все $rootScope.$on , так и $scope.$on слушателей и это тонкое, но очень важное отличие, которое поможет избежать проблем с вашим приложением.

$rootScope примеры

Давайте рассмотрим еще более глубокую иерархию:

В примере выше есть 3 лексические области видимости (где родительские области видимости доступны в текущей области видимости, несколько разрывает голову при мысли об этом с точки зрения определения областей видимостей в DOM, но концептуально то что нам нужно там) и 4 области видимости в Ангуляре: ParentCtrl , SiblingOneCtrl , SiblingTwoCtrl и ChildCtrl . Две “братские” области видимости.

Используя $scope.$emit внутри ChildCtrl выльется в то, что только SiblingTwoCtrl и ParentCtrl получат уведомления, так как событие вообще не распространилось на сиблингов, и затронуло лишь прямых предков (полностью игнорируя SiblingOneCtrl ). Если бы мы использовали $rootScope , тогда бы мы могли затронуть и слушателей событий в $rootScope .

Отписываемся от событий в Angular.JS

unsubscribe — часто системы событий в AngularJS. Вы можете прекратить прослушку событий в любое время со слушателем $on . В отличие от других библиотек, здесь нет $off метода. Документация Ангуляра не особо внятно объясняет нам то, как правильно “прекращать прослушку”, она говорит, что $on “Возвращает функцию отмены регистрации для слушателя событий.” Мы можем предположить, что под этим они подразумевают замыкание, которое позволит нам прекращать прослушку событий.

Внутри исходного кода v1.3.0-beta.11, мы можем определить местонахождение $on метода и подтвердить подозрения на наличие замыкания:

Мы можем подписать и прекратить прослушку событий очень простым способом:

$scope.$on $destroy

Когда мы используем $rootScope.$on , нам нужно отключать этих слушателей каждый раз, когда $scope уничтожается. Слушатели $scope.$on автоматически высвобождаются, но нам понадобится вызывать вышеупомянутое замыкание вручную в событии $destroy :

Отмена событий

Если вы выбрали использование $emit , один из слушателей событий в $scope может отменить его, и предотвратить распространение события вверх по цепочке. При использовании $broadcast событие не может быть отменено! Отмена события, которое было отправлено через $emit выглядит следующим образом:

$rootScope.$$listeners

У каждого объекта AngularJS есть некоторые свойства, мы можем покопаться в них и наблюдать за тем, что случается “под капотом”. Мы можем взглянуть на $rootScope.$$listeners , чтобы наблюдать за жизненным циклом слушателей.
Мы так же можем прекратить прослушку событий с его помощью (но я бы не советовал вам этого делать):

Распределение событий по пространствам имен

Обычно, если я работаю над конкретной фабрикой, я коммуницирую с другими директивами, контроллерами или даже фабриками, используя выделенное пространство имен для более чистой имплементации pub/sub , что делает код последовательным и позволяет избегать конфликтов имен.
Если бы я строил email приложение с ящиком входящих сообщений, то мы могли бы использовать пространство имен inbox для этого специального раздела. Это легко иллюстрируется несколькими простыми примерами:

Как прослушать событие mousemove на объекте документа в Angular

я реализую функцию перетаскивания в угловое приложение:http://jsfiddle.net/Jjgmz/1/

часть его, чтобы слушать mousemove событие для объекта документа.

как я могу прослушивать объект документа внутри компонента?

давайте представим, что это содержание компонента.HTML-файл:

Я использую угловой 4.

1 ответов

1) с помощью @HostListener (docs). Это предпочтительный метод, которого должно быть достаточно большую часть времени.

2) аналогично выше, вы также можете использовать (document:event)=»handler» на любом элементе DOM, но вышеупомянутое решение предпочтительнее, потому что код чище. Используя это, не сразу очевидно из класса, что у вас есть глобальный прослушиватель событий, и вы можете добавить дополнительные без необходимости.

3) (docs)-это решение более низкого уровня; полезно, когда вы не хотите загромождать свой код методами, но имеете дело с даже в другом месте, например, в крючке, как показывает следующий фрагмент. Однако будьте осторожны, поскольку вам все равно нужно удалить прослушиватель событий, чтобы предотвратить утечку памяти; либо сделайте это, когда вы знаете, что он вам больше не понадобится, либо в крючке OnDestroy.

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