Ключевое слово JavaScript this относится к объекту, которому оно принадлежит.
– В методе this относится к объекту-владельцу.
– Самостоятельно this относится к глобальному объекту.
– В функции this относится к глобальному объекту.
– В функции , в строгом режиме это не определено.
— В событии this относится к элементу, получившему событие.
— Такие методы, как call() и apply(), могут ссылаться на любой объект.
Предположим, у вас есть элемент ввода ниже
И вы хотите получить любые данные, хранящиеся в его атрибутах, скажем, значение, я покажу вам 2 способа сделать это.
ПЕРВЫЙ СПОСОБ
Во-первых, мы напрямую используем прослушиватель событий oninput и передаем (это) ключевое слово в качестве параметра нашей функции.
Вот наша функция JavaScript
Если вы открываете файл в своем браузере и пытаетесь ввести какое-либо значение, оно регистрируется прямо в консоли вашего браузера.
Это потому, что мы создали функцию myfunc(), которая требует текущий элемент в качестве аргумента, и мы использовали ключевое слово (this) для ссылки на текущий элемент.
Таким образом, когда мы вводим значение для ввода, оно будет регистрироваться непосредственно в консоли браузера.
Это будет выход
ВТОРОЙ СПОСОБ
Вместо того, чтобы показывать конечному пользователю, что происходит, когда наш элемент ввода получает значение, мы можем использовать метод HTML DOM addEventListener().
Метод element.addEventListener() прикрепляет обработчик событий к элементу, поэтому, если вы используете метод document.addEventListener(), вы будете прикреплять обработчик событий к элементу. HTML-документ (страница).
Мы привяжем наш элемент к этому методу и прикрепим прослушиватель событий, который будет запускаться при возникновении целевого события.
- Здесь мы использовали метод document.addEventListener(‘DOMContentLoaded’), чтобы убедиться, что HTML-документ (страница) полностью загружен до выполнения любой другой функции.
- Мы также использовали метод document.querySelector('#inp_foo').addEventListener('input'), чтобы присоединить прослушиватель событий input к элементу с идентификатором (inp_foo ).
- Таким образом, браузер будет продолжать прослушивать или отслеживать элемент ввода, пока он не получит значение, а затем выполнит любые другие коды внутри фигурных скобок.
Вы можете узнать больше о прослушивателях событий на W3Schools.
Где я могу это применить?
Что ж, это полностью оставлено на ваше усмотрение.
Предположим, вы создаете приложение-анкету и хотите использовать прослушиватель событий, чтобы узнать, правильный или неправильный ответ предоставлен пользователем.
Ваша HTML-форма может выглядеть так:
Я уверен, что вы будете использовать более безопасный и точный подход для проверки пользовательского ввода. Если вам нужна помощь, я буду рад протянуть руку!
Продолжайте кодировать!
Я также уверен, что вам понравился этот пост.
Не стесняйтесь оставлять комментарии ниже, если вы найдете какую-либо часть этого поста запутанной!
