Как привязать функцию к кнопке javascript
Перейти к содержимому

Как привязать функцию к кнопке javascript

  • автор:

Как добавить onclick к кнопке через js

Свойство onclick у элемента отвечает за обработку события клика по элементу. Чтобы добавить обработчик, достаточно просто присвоить этому свойству функцию, которая вызовется при клике:

// Получаем элемент const element = document.getElementById('test'); // Добавляем обработку события element.onclick = (event) =>  // . console.log(event); >; 

Этот способ имеет недостаток: нельзя навешать несколько обработчиков-функций на событие.

// Получаем элемент const element = document.getElementById('test'); // Добавляем обработку события element.onclick = (event) =>  // . console.log('first handler'); >; // Добавляем второй обработчик element.onclick = (event) =>  // . console.log('second handler'); >; 

Первый обработчик перезапишется вторым. Чтобы этого избежать, лучше использовать addEventListener() :

// Получаем элемент const element = document.getElementById('test'); // Добавляем обработку события element.addEventListener('click', (event) =>  // . console.log('first handler'); >); // Добавляем второй обработчик element.addEventListener('click', (event) =>  // . console.log('second handler'); >); 

В таком случае оба обработчика будут срабатывать по клику на элементе.

Как привязать функцию к кнопке javascript

Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент button :

Либо элемент input :

С точки зрения функциональности в html эти элементы не совсем равноценны, но в данном случае они нас интересуют с точки зрения взаимодействия с кодом javascript.

При нажатии на любой из этих двух вариантов кнопки происходит отправка формы по адресу, который указан у формы в атрибуте action , либо по адресу веб-страницы, если атрибут action не указан. Однако в коде javascript мы можем перехватить отправку, обрабатывая событие click

      

При нажатии на кнопку происходит событие click , и для его обработки к кнопке прикрепляем обработчик sendForm . В этом обработчике проверяем введенный в текстовое поле текст. Если его длина больше 5 символов, то выводим сообщение о недостимой длине и прерываем обычный ход события с помощью вызова e.preventDefault() . В итоге форма не отправляется.

Если же длина текста меньше шести символов, то также выводится сообщение, и затем форма отправляется.

Отправка формы через JavaScript

Также мы можем при необходимости при отправке изменить адрес, на который отправляются данные:

function sendForm(e)< // получаем значение поля key var keyBox = document.search.key; var val = keyBox.value; if(val.length>5) < alert("Недопустимая длина строки"); document.search.action="PostForm"; >else alert("Отправка разрешена"); >

В данном случае, если длина текста больше пяти символов, то текст отправляется, только теперь он отправляется по адресу PostForm , поскольку задано свойство action:

document.search.action="PostForm";

Для очистки формы предназначены следующие равноценные по функциональности кнопки:

 

При нажатию на кнопки произойдет очистка форм. Но также функциональность по очистке полей формы можно реализовать с помощью метода reset() :

function sendForm(e)< // получаем значение поля key var keyBox = document.search.key; var val = keyBox.value; if(val.length>5) < alert("Недопустимая длина строки"); document.search.reset(); e.preventDefault(); >else alert("Отправка разрешена"); >

Кроме специальных кнопок отправки и очистки на форме также может использоваться обычная кнопка:

При нажатии на подобную кнопку отправки данных не происходит, хотя также генерируется событие click:

      

При нажатии на кнопку получаем введенный в текстовое поле текст, создаем новый элемент параграфа для этого текста и добавляем параграф в элемент printBlock.

Привязка кнопки веб-элемента к кнопке на клавиатуре

По итогу я хочу получить такую реализацию, чтобы по нажатию на веб-элемент мышкой происходило то же, что произошло если бы я нажала «F12» на клавиатуре ПК.

Отслеживать
задан 1 сен 2018 в 14:32
131 1 1 золотой знак 2 2 серебряных знака 13 13 бронзовых знаков
1 сен 2018 в 15:45
хотите разобраться — пишите мне, правьте вопрос, а не ищите минусующих
1 сен 2018 в 15:55

Браузер, может перехватывать события нажатия клавиш. Но он вам не позволит генерировать нажатие клавиш и пробрасывать их в ОС. Это не безопасно. С такой возможностью можно удалить данные с диска путём нажатия клавиш, например.

1 сен 2018 в 16:20
@Yiulia, вы пишите расширение для хрома? если нет — то это невозможно
1 сен 2018 в 16:20

@Yiulia, bugs.chromium.org/p/chromium/issues/detail?id=112277 «We only allow explicit devtools opening.» — судя по всему, и в расширении это не доступно.

1 сен 2018 в 16:34

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

К сожалению это не сработает в целях безопасности Javascript, хотя если после нажатия должно выполнится событие внутри приложения (сайта) то имеется решение привязки к одной функции.

function toggleBg() < alert("test"); >document.addEventListener('keypress', function(event) < if (event.keyCode == 112) < toggleBg(); >>);

Обработчики Событий в JS (как работает addEventListener)

В этой статье мы с вами разберемся как правильно использовать обработчики событий (addEventListener) в Javascript на различных элементах DOM дерева страниц. Эти элементы могут включать кнопки, ссылки, изображения и так далее.

Любой DOM элемент запускает событие, когда мы с ним как-то взаимодействуем (кликаем, наводим мышь и др.). Обработчики событий в JS используются для того, чтобы реагировать на эти события.

Обработчики событий можно «вешать» на любые элементы DOM (Data Object Model) дерева, а также глобальные объекты window и document.

Предположим, на нашей странице есть html элемент button с классом «btn»:

1div class="wrapper">
2 button class="btn">Click/button>
3 /div>

Давайте выделим наш элемент button и присвоим его переменной button:

1const button = document.querySelector('.btn');

Чтобы «повесить» обработчик событий на наш элемент button, нужно использовать специальный метод — addEventListener. Этот метод принимает 2 аргумента:

  1. Тип события (мы будем «слушать» событие «click»).
  2. Так называемую колбэк (callback) функцию, которая запускается после срабатывания нужного события.

Колбэк функция (callback function) — отличается от обычной функции, тем, что ее запускаем не мы, а браузер, который делает это после срабатывания события.

1const button = document.querySelector('.btn');
2button.addEventListener('click', function ()
3 console.log('click');
4 >);

Таким образом, каждый раз после срабатывания события «click» будет запускаться наша коллбэк функция и мы будем получать строку «click» в нашей консоли.

Обработчики событий JS (выносим логику коллбэк функции за пределы метода addEventListener)

Мы также можем вынести нашу коллбэк функцию за пределы метода addEventListener, а внутри обработчика событий просто ссылаться на нее:

1const button = document.querySelector('.btn');
2
3 function handleClick()
4 console.log('click');
5 >
6button.addEventListener('click', handleClick);

Плюс такого подхода заключается в том, что теперь мы легко можем повторно использовать логику нашего обработчика событий для других элементов DOM дерева.

Давайте использовать готовую логику в функции handleClick — для новой кнопки:

1div class="wrapper">
2 button class="btn">Click/button>
3 button class="btnTwo">Click 2/button>
4 /div>
1const button = document.querySelector('.btn');
2 const buttonTwo = document.querySelector('.btnTwo');
3
4 function handleClick()
5 console.log('click');
6 >
7button.addEventListener('click', handleClick);
8
9 // Вешаем обработчик событий с готовой логикой на новую кнопку
10buttonTwo.addEventListener('click', handleClick);

Как снять обработчик события addEventListener с элемента?

Чтобы снять обработчик события с какого-либо элемента, нужно использовать метод removeEventListener. В качестве аргументов нужно указать не только название события («click»), но и название коллбэк функции, которая привязана к элементу.

1buttonTwo.removeEventListener('click', handleClick);

Метод removeEventListener не сработает, если в качестве коллбэк функции использовать безымянную функцию, так как будет отсутствовать возможность сослаться на нее.

Обработка событий на нескольких DOM элементах

Как использовать обработчик событий addEventListener, когда нам требуется использовать его сразу на нескольких элементах?

Предположим, на нашей странице есть 5 кнопок с классом «btn»:

1div class="wrapper">
2 button class="btn">Click 1/button>
3 button class="btn">Click 2/button>
4 button class="btn">Click 3/button>
5 button class="btn">Click 4/button>
6 button class="btn">Click 5/button>
7 /div>

В этом случае можно использовать 2 подхода, чтобы повесить на них обработчик событий.

Подход 1. Используем отдельный addEventListener для каждой кнопки

Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons. Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке, и повесить на нее обработчик событий addEventListener.

1const buttons = document.querySelectorAll('.btn');
2
3 function handleClick()
4 console.log('click');
5 >
6
7buttons.forEach((button) =>
8 button.addEventListener('click', handleClick);
9 >);

Подход 2. Делегирование события (Event delegation)

Здесь, основная идея заключается в том, что мы можем ловить события, связанные с дочерними элементами (которых может быть очень много), используя единственный родительский элемент.

То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper», и обрабатывать события, которые активируются на дочерних элементах button.

Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript, который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.

Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target, чтобы получить элемент, на который мы кликнули.

1const wrapper = document.querySelector('.wrapper');
2
3 function handleClick(e)
4 console.log('click', e.target);
5 // При клике получаем каждый конкретный элемент button
6 // click
7 // click
8 >
9
10wrapper.addEventListener('click', handleClick);

Прототипное наследование Javascript (+ видео с примером)

Поднятие в JS (Hoisting в Javascript + 3 примера)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *