Как сделать несколько onclick
Добавил пользователь Skiper Обновлено: 05.10.2024
Событие onclick - это, пожалуй, самое популярное событие на странице, т.к. щелчки мышью мы совершаем по кнопками, по ссылкам в меню, по элементам аккордеона, которые сворачиваются и разворачиваются и т.п.
Начнем рассматривать обработку этого события с простого примера.
Быстрее щелкайте по абзацу!
Обычно в качестве примера для обработки события onclick используют кнопку. Мы не будем отходить от традиции и напишем простой скрипт, который будет отображать скрытый текст в абзаце, идущем в разметке сразу за кнопкой.
Пантелею-программисту
Нравится печатать быстро.
Целый день сидит-молчит
И по кнопочкам стучит.
. и понимаем, что нам не хватает теперь обратного действия - чтобы при повторном клике по кнопке текст сворачивался. Сделаем этот вариант, но уже с использованием классов. В коде, размещенном ниже, у нас есть 2 элемента - кнопка с id="btn" и абзац id="pText" , к которым мы обращаемся в функции-обработчике события onclick . Строка pText.classList.toggle('hideText') позволяет убирать класс hideText , если он присутствует как атрибут в элементе pText , или добавлять, если класса нет. Тернарный оператор в последней строке функции позволяет менять текст кнопки в зависимости от того, который написан в данный момент.
Пантелею-программисту
Нравится печатать быстро.
Целый день сидит-молчит
И по кнопочкам стучит.
Обработка события onclick для меню
В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка. Мы используем css-свойство animation , чтобы меню появлялось из прозрачного состояния (за это отвечает свойство opacity ). Обратите внимание, что теги
Вы можете проверить действие метода event.preventDefault() , кликнув на ссылке с текстом "Menu" и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.
Обработка события onclick для элементов форм
В формах чаще всего клики мышью обрабатываются для кнопок, флажков и радио-кнопок (переключателей). Мы рассмотрим вариант скрипта, который меняет изображение при клике на одной из радио-кнопок. Для этого создадим html-разметку, в которой будет форма с именем imageControl и 4 переключателя. В переключателях важным атрибутом для нас будет value , в котором указан путь к изображениям, которые затем мы будем подставлять в качестве атрибута src для изображения:
Коллеги, в магазину нужно повесить события на кнопку "Купить":
из Яндекс Метрики -
Как синтаксически правильно расставить эти события в одной кнопке? Пробовал по-всякому: то метрики не срабатывают, то "Купить" не работает.
Заранее очень спасибо!
Вызов нескольких методов onclick
Сразу скажу, не особый спец в JS, не знаю многих азов, но нужно быстро решить задачу: Есть.
Вызов нескольких функций
Вот у меня такой вопрос. Писал на ассемблере бегущий огонек. И решил переделать и сделать так.
Connect, вызов нескольких функций
Привет. Есть обычный сonnect. При нажатии на кнопку мне нужно вызвать более одной функции. Как.
Вызов нескольких функций в цикле по имени
Хочу сделать в цикле запрос функций в стиле NumberLayers = 4 for i = 1, NumberLayers do .
foxytrail, тут 2 пути
через addListener/JQuery.on
и написание функции, в которой по очереди будут вызываться события
2-ой вариант:
Cra3y, спасибо!
Выдает вышеописанную ошибку.
PS. под спойлерами части кода, непосредственно относящиеся к предмету обсуждения
Простейшее событие - это клик левой кнопкой мыши. Это событие можно назначить на любой элемент с помощью метода click. В параметры этого метода необходимо передать функцию, которая будет происходить по клику. Внутри этой функции даже можно использовать this, который будет указывать на тот элемент, на который кликнули. Давайте попробуем привести пример, когда клик на любой, элемент, удовлетворяющий условию, приведёт к срабатыванию функции: Если создать HTML страницу с таким примером и попытаться нажать на любой
контейнер, то появится всплывающее окно, в котором будет текст контейнера, на который кликнули:
Обратите внимание, что для того чтобы работали методы jQuery, this было заключено в скобки $(this). Иначе можно было бы использовать только чистые JavaScript методы. То есть необходимо было бы написать this.innerHTML
Отвязать событие (unbind)
Бывают ситуации, когда необходимо удалить событие. Для этого используется метод unbind. Этот метод получает два параметра: название событие (к примеру, 'click') и название функции, которую надо отвязать. Модифицируем предыдущий пример, чтобы продемонстрировать метод unbind. Пусть при первом же вызове произойдёт отвязка: Как можно заметить, в примере мы разделили функцию и привязку для наглядности. То есть обозвали функцию "MyFunc" и вынесли её отдельно. Если загрузить страницу с таким кодом к кликнуть на любой
контейнер, то появится всплывающее окно с содержанием контейнера, на который кликнули (так же как и в предыдущем примере). Но затем произойдёт отвязка события с помощью unbind и повторные клики на этот элемент ни к чему не приведут.
В jQuery название методов повторяют название событий. К примеру, метод "click" делает привязку события "click" (клик мышкой). Список событий JavaScript можно найти в этой статье: Список событий в JavaScript
Универсальный метод привязки (on)
Иногда удобнее вопспользоваться универсальным методом привязки on. Первым параметром ему передаётся название события, а вторым название функции (или сама функция) для привязки. Попробуем модифицировать один из предыдущих примеров, пользуясь этим методом: Благодаря этому методу можно производить привязку нескольких методов одновременно, перечислив их через пробел в первом свойстве метода on. Давайте изменим пример и добавим помимо события по клику мышкой "click" ещё и событие на движение мышкой "mousemove":
Универсальный метод отвязки (off)
Антонимом к методу on является универсальный метод отвязки off. Ему тоже необхоим передавать названия события для отвязки и названия функции, которую надо отвзязать. Попробуем модифицировать один из предыдущих примеров, пользуясь этим методом:
Однократное событие (one)
Бывают случаи, когда необходимо сделать однократное событие. То есть событие, которое будет срабатывать только один раз. Делается это с помощью метода one (в преводе с английского "one" = "один"). Этот метод принимает те же самые праметры, что и метод on. Попробуем его: Теперь если вызвать событие, то оно произойдёт только один раз, а потом отвяжется, как будто внутри функции стоит метод unbind.
Можно ли использовать атрибут onclick html для вызова нескольких функций JavaScript?
Но на самом деле вам лучше не использовать onclick вообще и привязать обработчик событий к DOM node через ваш код Javascript. Это называется ненавязчивый javascript.
Спасибо за ссылку на ненавязчивый JS, я сталкивался с этим раньше, и я должен воздерживаться от написания навязчивого JS только потому, что я ленивый! XD
никаких проблем . Я также очень рекомендую jQuery, который действительно поможет вам в вашей ненавязчивой цели. Вы можете легко прикреплять обработчики событий к элементам DOM и делать намного больше всего ненавязчивого. Я использовал его в течение 2 лет и никогда не оглядывался назад.
Если одно вызванное действие в onclick терпит неудачу, все это падает как цепочка домино, и onclick не работает.
Это лучший способ добавить 2 функции, как то, что вы предложили funct1 (); funct2 ()? это не всегда может работать, нет?
Этот атрибут html на самом деле является onclick="" not onClick="" . Это очень распространенная ошибка.
Ссылка с 1 определенной функцией
Вызов нескольких функций из someFunc()
Это может не сработать, если у вас есть какие-либо аргументы, передаваемые в функции, особенно если вы генерируете эти аргументы из серверного языка. Было бы проще создать / поддерживать код, добавляя функции (с любыми аргументами) в язык на стороне сервера, а не тестируя все возможные итерации как на сервере, так и на клиенте.
Читайте также: