Как передать событие вызову функции в javascript с помощью прослушивателя, прикрепленного к документу?

Я пытаюсь просмотреть нажатия клавиш на простой веб-странице, используя следующий код:

document.addEventListener("onkeypress", currentKeyPress(event));
function currentKeyPress(event){
    var keynum;
    console.log(event.which);
    if(document.event){
        keynum = event.keyCode;
    } else if(event.which){
        keynum = event.which;
        console.log(event.which);
    }
    document.getElementById("info").innerHTML = keynum;

}

Когда я это делаю, я получаю «ReferenceError: событие не определено» в firefox. Что мне нужно сделать, чтобы это исправить?


person user348136    schedule 08.05.2017    source источник
comment
"onkeypress", currentKeyPress - просто передайте ссылку на функцию. Прямо сейчас вы пытаетесь вызвать функцию с неопределенным параметром event.   -  person Niet the Dark Absol    schedule 08.05.2017
comment
Это не дубликат в этом вопросе....   -  person epascarello    schedule 08.05.2017


Ответы (3)


Вам не нужно передавать переменную события:

сделай так:

document.addEventListener("onkeypress", currentKeyPress);
function currentKeyPress(event){
    var keynum;
    console.log(event.which);
    if(document.event){
        keynum = event.keyCode;
    } else if(event.which){
        keynum = event.which;
        console.log(event.which);
    }
    document.getElementById("info").innerHTML = keynum;
}

Событие автоматически передается в функцию currentKeyPress.

См. пример ниже:

document.getElementById('paraxxx').addEventListener("click", doThis);
function doThis(event){
    console.log(event)
}
<p id="paraxxx">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Здесь, когда вы нажмете на абзац, вы вызовете функцию doThis, и событие будет передано ей.

person Shakti Phartiyal    schedule 08.05.2017
comment
Теперь код работает, но я заметил две вещи... во-первых, когда я пытаюсь поместить его во внешний файл .js, он больше не работает. Во-вторых, похоже, ему не нравятся клавиши со стрелками, Shift и т. д. Есть ли способ захватить и их? - person user348136; 08.05.2017
comment
@ user348136, пожалуйста, обратитесь к stackoverflow.com/questions/ 5597060/ для захвата событий клавиш со стрелками.. - person Shakti Phartiyal; 08.05.2017
comment
@user348136 user348136 в случае внешнего файла js позаботьтесь о том, чтобы файл js был загружен на страницу, проверьте консоль браузера на наличие ошибок - person Shakti Phartiyal; 08.05.2017
comment
Сделаю. А как насчет проблемы с загрузкой во внешний JS? Я добавил команду console.log, и похоже, что она есть, но прослушиватель событий не работает. - person user348136; 08.05.2017
comment
@user348136 user348136 возможно, что прослушиватель событий подключен до того, как элемент будет создан в документе ... сделайте предупреждение во внешнем файле js и проверьте, происходит ли это. Также проверьте консоль браузера на наличие ошибок, как я указал выше. Если проблема не устранена, пришлите мне снимок экрана с содержимым файла js, а также положением элемента dom и разделом, в который включен файл js. - person Shakti Phartiyal; 08.05.2017
comment
Как сделать оповещение во внешнем файле? у меня уже есть предупреждение в журнале, но я не знаю, как заставить его прикрепляться после создания элемента. Не мог бы я просто поместить его внизу HTML? - person user348136; 08.05.2017
comment
@ user348136 просто напишите alert(); во внешнем js-файле. Если появляется предупреждение, это означает, что файл js успешно загружен. - person Shakti Phartiyal; 08.05.2017
comment
Хорошо, тогда это сработало. Я добавил его, но, похоже, у него не работает eventlistener - person user348136; 08.05.2017
comment
@user348136 user348136 можете ли вы прислать скриншоты прикрепленного js-файла и скрипта, к которому вы прикрепляете файл - person Shakti Phartiyal; 08.05.2017
comment
Я не могу отправить скриншоты, но я могу встроить HTML. Javascript такой же, как и выше, за исключением небольшого изменения: ‹!DOCTYPE html› ‹html› ‹head› ‹/head› ‹body› ‹center› ‹h1›TEST‹/h1› ‹/center› ‹p id=info›Info идет сюда‹/p› ‹/body› ‹script type=text/javascript src=myscript.js›‹/script› ‹/html› - person user348136; 08.05.2017
comment
@user348136 user348136 любые ошибки в консоли браузера › - person Shakti Phartiyal; 08.05.2017
comment
Нет ошибок. Я даже пытался добавить в html отдельный вызов с помощью ‹body onload=initLoads();›, который работает, но по-прежнему не выводит функцию, прослушивающую нажатия клавиш: function initLoads(){ console.log(initLoads call); document.addEventListener(onkeypress, currentKeyPress); } функция currentKeyPress (событие) { предупреждение (вызывается currentKeyPress); вар кейнум; if(document.event){ keynum = event.keyCode; console.log(event.keyCode); } else if(event.what){ keynum = event.what; console.log(событие.которое); } } - person user348136; 08.05.2017
comment
@user348136 user348136 событием является нажатие клавиши, а не нажатие клавиши: function initLoads () { console.log (initLoads вызывается); document.addEventListener (нажатие клавиши, currentKeyPress); } функция currentKeyPress (событие) { предупреждение (вызывается currentKeyPress); вар кейнум; if(document.event){ keynum = event.keyCode; console.log(event.keyCode); } else if(event.what){ keynum = event.what; console.log(событие.которое); } } - person Shakti Phartiyal; 08.05.2017
comment
@ user348136 это сработает - person Shakti Phartiyal; 08.05.2017
comment
Так и было. Большое спасибо. - person user348136; 08.05.2017
comment
@user348136 user348136 Отлично, не забудьте одобрить / проголосовать за ответ, если он вам помог .. Отправьте мне запрос на любую дополнительную помощь - person Shakti Phartiyal; 08.05.2017

document.addEventListener("onkeypress", currentKeyPress(event)); //error 

Парсер ожидает, что второй аргумент document.addEventListener будет функцией, теперь вы передаете результат вызова функции вместе с переменной события, которая не определена в текущей области (отсюда и исключение), вам нужно передать только ссылка на функцию. Javascript вызовет вашу функцию, как только событие сработает, предоставив событие в качестве аргумента.

изменить его на:

document.addEventListener("keypress", currentKeyPress));
person Karim    schedule 08.05.2017

person    schedule
comment
>> No need to mention a event это кажется неправильным, это приводит к ReferenceError: event is not defined внутри функции. Запустите свой собственный код. Вам нужно определить функцию как function currentKeyPress(event){.... Все остальное верно. - person Egor Stambakio; 08.05.2017
comment
@wostex Нет, event проходит мимо add event-listener. Посмотрите, мой код работает хорошо. Он не выдает никаких ошибок. console.log(event) в функции работает нормально - person prasanth; 08.05.2017
comment
выдает ошибку в firefox. Fiddle: jsfiddle.net/wostex/r2zjx8a7 этот код отлично работает в Firefox, вы можете сфокусироваться на кадре dom и нажимайте кнопки. Если вы пропустите event для объявления функции - вы получите ошибку. В хроме работает нормально в любом случае. - person Egor Stambakio; 08.05.2017
comment
@wostex.. да. вы правы.. я работал только с хромом, спасибо, чувак. я был отредактирован - person prasanth; 08.05.2017