Блог

Главная - Вопросы по программированию - Прослушиватели событий jQuery, обрабатывающие это

Прослушиватели событий jQuery, обрабатывающие это

#jquery #this #addeventlistener #event-listener

#jQuery #это #addeventlistener добавить eventlistener #прослушиватель событий

Вопрос:

Я продемонстрировал 4 различных синтаксиса для подключения прослушивателя событий. За https://api.jquery.com/click / .click(), прикрепленный к кнопке 2, является сокращением для .on( «щелчок», обработчик), прикрепленный к кнопке 3. Однако кнопка 3 не распознает «this», так как она выводит «undefined» в журнале, в то время как все остальные кнопки возвращают свой идентификатор кнопки. Вместо этого я создал другую функцию для кнопки 4, чтобы явно передавать «это» при использовании .click() .

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handle This</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    function handleThis1(e) { console.log(`Event: ${e.type}, This: ${this.id}`); }
    function handleThis2(e, t) { console.log(`Event: ${e.type}, This: ${t.id}`); }
        $(document).ready(function () {
            document.getElementById("button1").addEventListener('click', handleThis1);
            $("#button2").on('click', handleThis1);
            $("#button3").click(function (event) { handleThis1(event) });
            $("#button4").click(function (event) { handleThis2(event, this) });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="Button 1">
    <input type="button" id="button2" value="Button 2">
    <input type="button" id="button3" value="Button 3">
    <input type="button" id="button4" value="Button 4">
</body>
</html>

Итак, почему кнопка 2 распознает «это», а кнопка 3 — нет?

Ответ №1:

когда вы делаете

 handleThis1(event);

контекст вызова функции — Window . следовательно this , в handleThis1 функции window

если вы измените способ вызова этой функции на

     handleThis1.apply(this, [event]);

тогда контекст — button3

Комментарии:

1. После публикации я выяснил, что это вызывало объект Window, удалив свойство .id . Но это будет работать. Но теперь у меня есть кое-что новое, о чем нужно узнать — это метод apply . Это ново для меня, но я очень новичок. Спасибо.