#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 . Это ново для меня, но я очень новичок. Спасибо.