Работа с jQuery

Несколько простых примеров onclick на языке javascript. Настраиваем свои собственные события

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

Я покажу вам несколько способов работы с данным инструментом, объясню в чем их преимущества и недостатки, а также опишу работу jQuery с событиями. А теперь перейдем к разбору материала!

Назначение обработчиков событий

Для начала разберем теоретическую часть вопроса. Практически все веб-сайты на своих страницах обрабатывают скрипты. А обычно это различные события. Чтобы все эти запрограммированные события сработали, для них необходимо установить обработчик.

По правилам написания все обработчики включают в свое название «on+наименование события», что и соблюдено в onclick (). В зависимости от выбранного события обработка будет происходить вследствие разных действий. В нашем случае при использовании onclick () будут выполняться только те event-ы, которые были вызваны левым кликом мышки.

Различные способы назначения событийного обработчика

На сегодняшний день существует несколько вариантов внедрения в код обработчика некого или неких событий.

Использование простых событий

Начнем с простого варианта, который заключается во внедрении onclick () в саму разметку html-документа. Выглядит это следующим образом:

Как вы видите, при нажатии на кнопку левой кнопкой мыши появляется сообщение «Клик-клик!». Хочу обратить ваше внимание на одну маленькую, но существенную деталь. Внутри alert можно использовать только одинарные кавычки (‘’).

Также в данном случае можно использовать ключевое слово this. Оно ссылается на текущий элемент и предоставляет все ему доступные методы.

Эта строка кода создает кнопку с текстом «Нажми на меня». После нажатия вы увидите на экране сообщение: «’Нажмиии!». Оно и заменит первое название кнопки.

Данный способ, бесспорно, очень прост. Однако он подходит только для аналогичных задач, т.е. вывода сообщений или выполнения простых команд.

Если же необходимо использовать циклические конструкции, задействовать теги и т.д., то данный способ не подходит. Он уменьшит степень читабельности кода, а также сделает его громоздким и неаккуратным.

В таком случае стоит прибегать к функциям.

Работа с функциями

Функции позволяют отделить нужный код в отдельный блок, который впоследствии можно вызывать через событийный обработчик в html-разметке.

В качестве примера я прикрепил приложение для вывода пользователю результирующего числа в различных степенях, начиная с 1-ой и заканчивая 5-ой. Для этого я создал функцию countPow (), в которую можно передавать параметры. В моем приложении юзер должен вписать цифру в качестве переменной функции.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Данный способ достаточно часто используется при разработке. Однако он не самый популярный, ведь не всегда удобно привязывать события подобным образом. Иногда для решения некоторых задач лучшим вариантом является предусмотреть гибкую привязку объектов к событиям используя их свойства.

Свойства DOM-элементов

Для тех, кто не знает, DOM – расшифровывается как «Document Object Model» («Объектная модель документа»). Она является основным инструментом для проведения различных изменений и манипуляций над элементами веб-страницы.

Так как DOM представляет собой иерархическое дерево, то к определенным свойствам и методам объектов страницы можно добраться через продвижение по конкретным ветвям.

В качестве примера я решил изменить цвет фона со стандартного на синий. Для этого я прошел по цепочке document.body.style.backgroundColor.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Использование библиотеки jQuery

С выходом в свет названной библиотеки появилось множество дополнительных команд, свойств и методов, которые значительно упрощают и сокращают написанный код. Наиболее часто разработчики используют свойства для получения конкретного элемента по его идентификатору (document.getElementById (iden)), классу (element.getElementsByClassName (className)), тегу (elem.getElementsByTagName (tag)) или имени (document.getElementsByName (name)).

Для понимания, о чем идет речь, проанализируйте следующий пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

     
Рискни, нажми на меня! function SupperButton() 

Как видите, все работает достаточно просто.

Если вам понравилась моя статья, то обязательно подписывайтесь на обновления. Впереди еще уйма всего интересного и познавательного. Буду благодарен за репосты моих публикаций. Пока-пока!

Да, хочу читать и Я

Источник

click event

.on( «click» [, eventData ], handler ) Returns: jQuery

Description: Bind an event handler to the «click» event.

version added: 1.7 .on( «click» [, eventData ], handler )

This page describes the click event. For the deprecated .click() method, see .click() .

The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. For example, consider the HTML:

div id="target">
 Click here
 div>
div id="other">
 Trigger the handler
 div>

The event handler can be bound to any :

$( "#target" ).on( "click", function( ) 
 alert( "Handler for `click` called." );
> );

$( "#other" ).on( "click", function( ) 
 $( "#target" ).trigger( "click" );
> );

html>
html lang="en">
head>
 meta charset="utf-8">
 title>on demo title>
 style> 
 p 
 color: red;
 margin: 5px;
 cursor: pointer;
 >
 p:hover 
 background: yellow;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
p>First Paragraph p>
p>Second Paragraph p>
p>Yet one more Paragraph p>
 
script> 
$( "p" ).on( "click", function( ) 
 $( this ).slideUp();
> );
 script>
 
 body>
 html>