Иногда возникает необходимость передать в обработчик некоторые данные. Если обработчики событий устанавливаются с помощью атрибутов элементов, то это сделать довольно просто. Например, передадим в обработчик нажатия кнопки текст, которые будет использоваться в обработчике:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<button id="btn" onclick="btn_click('Button Clicked')">Click Me</button>
<script>
// в обработчик передается текст
function btn_click(text){
console.log(text); // выводим этот текст
}
</script>
</body>
</html>
Итак, здесь в обработчик кнопки передается некоторый текст:
<button id="btn" onclick="btn_click('Button Clicked')">
В функции обработчика получаем этот текст и некоторым образом его используем, например, выводим на консоль:
function btn_click(text){
console.log(text); // выводим этот текст
}
В данном случае в функцию обработчика передавалась строка, но в реальности, это может быть любой объект. Например, через значение this можно передать текущий объект, на котором возникает событие:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<button id="btn" onclick="btn_click(this)">Click Me</button>
<script>
let clicks = 0; // счетчик нажатий
// в обработчик передается ссылка на элемент кнопки
function btn_click(btn){
// изменяем текст кнопки
btn.textContent = `Clicked ${++clicks}`;
}
</script>
</body>
</html>
Ключевое слово this указывает на текущий объект ссылки, на которую производится нажатие. И в коде обработчика мы можем
получить этот объект и обратиться к его свойствам, например, к свойству textContent и таким образом изменить текст кнопки.
Стоит отметить, что в некоторых случаях нам может потребоваться возвращать из обработчика значение false. Например, рассмотрим следующую программу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<a id="link" href="https://metanit.com" onclick="return a_click(this)">Metanit.com</a>
<script>
// в обработчик передается ссылка
function a_click(anchor){
// получаем адрес ссылки
console.log(anchor.href);
return false; // запрещаем переадресацию
}
</script>
</body>
</html>
Здесь в атрибуте onclick ссылки - элемента <a> не просто вызывается обработчик события, а возвращается его результат:
<a id="link" href="https://metanit.com" onclick="return a_click(this)">
Причем функция обработчика возвращает false:
function a_click(anchor){
console.log(anchor.href);
return false; // запрещаем переадресацию
}
Дело в том, что для некоторых обработчиков можно подтвердить или остановить обработку события. Например, нажатие на ссылку должно привести к переадресации.
Но возвращая из обработчика false, мы можем остановить стандартный путь обработки события, и переадресации не будет.
Если же возвращать значение true, то событие обрабатывается в стандартном порядке.
Если же мы вовсе уберем возвращении результата, то событие будет обрабатываться, как будто возвращается значение true:
<a id="link" href="https://metanit.com" onclick="a_click(this)">Metanit.com</a>
<script>
function a_click(anchor){
console.log(anchor.href);
}
</script>
При обработке события браузер автоматически передает в функцию обработчика в качестве параметра объект Event, который инкапсулирует всю информацию о событии. И с помощью его свойств мы можем получить эту информацию:
bubbles: возвращает true, если событие является восходящим. Например, если событие возникло на вложенном элементе, то
оно может быть обработано на родительском элементе.
cancelable: возвращает true, если можно отменить стандартную обработку события
currentTarget: определяет элемент, к которому прикреплен обработчик события
defaultPrevented: возвращает true, если был вызван у объекта Event метод preventDefault()
eventPhase: хранит число, которое представляет стадию обработки события. Возможные значения:
0 (Event.NONE)
1 (Event.CAPTURING_PHASE)
2 (Event.AT_TARGET)
3 (Event.BUBBLING_PHASE)
target: указывает на элемент, на котором было вызвано событие
timeStamp: хранит время возникновения события
type: указывает на имя события
isTrusted: указывает, событие было сгенерировано элементами веб-страницы или кодом JavaScript
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<button onclick="btn_click(event)">Click Me</button>
<script>
function btn_click(e){
console.log(e);
}
</script>
</body>
</html>
При вызове функции-обработчика информация о событии доступна через объект event.
Этот объект не определяется разработчиком, это просто аргумент функции обработчика, который хранит всю информацию о событии:
<button onclick="btn_click(event)">
В коде JavaScript этот объект можно получить через параметр функции:
function btn_click(e){
console.log(e);
}
В данном случае просто выводим объект на консоль. Но естественно также можно было бы получить отдельную конкретную информацию о событии:
function btn_click(e){
console.log("Type:", e.type); // Type: click
console.log("Target:", e.target); // Target: <button onclick="btn_click(event)">Click Me</button>
console.log("Timestamp:", e.timeStamp);
}
Подобным образом мы можем получить объект события, если обработчик события прикрепляется через свойства элементов или через метод addEventListener(). Например, прикрепеление обработчика через свойство элемента:
<button id="btn">Click Me</button>
<script>
function btn_click(e){
console.log("Type:", e.type);
console.log("Target:", e.target);
console.log("Timestamp:", e.timeStamp);
}
// устанавливаем обработчик нажатия для элемента с id="btn"
document.getElementById("btn").onclick = btn_click;
</script>
Или прикрепеление обработчика с помощью метода addEventListener:
<button id="btn">Click Me</button>
<script>
function btn_click(e){
console.log("Type:", e.type);
console.log("Target:", e.target);
console.log("Timestamp:", e.timeStamp);
}
const btn = document.getElementById("btn");
// прикрепляем обработчик события "click"
btn.addEventListener("click", btn_click);
</script>
С помощью метода preventDefault() объекта Event мы можем остановить дальнейшее выполнение события. В ряде случаев этот метод не играет большой роли. Однако в некоторых ситуаций он может быть полезен. Например, при нажатии на ссылку мы можем с помощью дополнительной обработки определить, надо ли переходить по ссылке или надо запретить переход. Или другой пример: пользователь отправляет данные формы, но в ходе обработки в обработчике события мы определили, что поля формы заполнены неправильно, и в этом случае мы также можем запретить отправку.
Например, остановим переход по ссылке:
<a id="link" href="https://metanit.com">Metanit.com</a>
<script>
function linkHandler(e){
console.log("Link has been clicked");
e.preventDefault(); // останавливаем переход по ссылке
}
const link = document.getElementById("link");
link.addEventListener("click", linkHandler);
</script>
Здесь по нажатию на ссылку будет срабатывать метод linkHandler. И, поскольку в этом методе с помощью вызова e.preventDefault() предупреждаем
переход по ссылке, то перехода не будет. Данный подход, к примеру, часто используется при ajax-запросах, когда надо обработать нажатие на ссылку, но при этом не выполнять перехода на другой ресурс, а сделать к нему
запрос из кода javascript без перезагрузки страницы.
Для получения текущего объекта, для которого обрабатыватся событие, внутри обработчика события мы можем использовать ключевое слово this:
<button id="btn">Click Me</button>
<script>
const btn = document.getElementById("btn");
function btn_click(){
console.log(this); // <button id="btn">Click Me</button>
}
btn.addEventListener("click", btn_click);
</script>
Здесь при обработке события click на кнопке объект this в функции btn_click будет представлять эту кнопку. Фактически в данном случае значения this и
event.target были бы эквивалентны
function btn_click(e){
console.log(this===e.target); // true
}