Несколько простых примеров onclick на языке javascript
Наше руководство поможет вам разобраться в функционале onclick () – обработчика событий. Для лучшего усваивания материала, мы приведем несколько простых примеров. Вы узнаете о их плюсах и минусах, а также усвоите принцип работы jQuery с событиями.
Назначение обработчиков событий
Перед тем как переходить к практике, нужно изучить теорию. Практически все сайты на своих веб-страницах обрабатывают скрипты. Как правило, это разные события. Чтобы все они сработали для них нужно установить обработчик.
Все обработчики по правилам написания содержат в названии «on+наименование события», что и соблюдено в onclick (). В зависимости от конкретного события обработка будет осуществляться вследствие различных действий. То есть при использовании onclick () будут выполняться только те event-ы, которые вызваны левым кликом мышки.
Примеры назначения событийного обработчика
На текущий момент существует несколько способов внедрения в код обработчика определенных событий.
Простые события
Рассмотрим простой вариант, который строится на внедрении onclick ()непосредственно в html-разметку. Это выглядит так:
<!DOCTYPE HTML>
<html>
<head>
<metacharset=»utf-8″>
</head>
<body>
<inputtype=»button» onclick=»alert(‘Клик-клик!’)» value=»Кликни на меня и узнаешь, что произойдет.»/>
</body>
</html>
При нажатии на левую кнопку мышки всплывает сообщение «Клик-клик!». Здесь важно не забыть об этой маленькой, но существенной детали: внутри alert должны использоваться только одинарные кавычки (‘’).
Кроме того, в этом случае может применяться слово this, которое ссылается на текущий элемент и предоставляет ему все доступные методы.
<buttononclick=»alert (this.innerHTML=’Кликни!’)»>Нажми на меня</button>
Данная строка кода создает кнопку с текстом «Нажми на меня». В результате на экране всплывет сообщение: «’Кликни!». Оно заменит изначальное название кнопки.
Это самый простой способ, который можно использовать только для подобных задач, то есть выполнения простых команд или вывода сообщений.
При необходимости использования цикличных конструкций, тегов и так далее, этот способ не подойдет, так как уменьшит читабельность кода, сделав его неаккуратным и громоздким. В этом случае лучше прибегнуть к функциям.
Работа с функциями
С помощью функций можно отделить необходимый код в отдельный блок, который в результате можно вызывать посредством событийного обработчика в разметке html.
Рассмотрим пример приложения для вывода результирующего числа в разных степенях: от первой до пятой. Для этого была использована функция countPow (). В нее можно передавать примеры. В приведенном ниже приложении пользователь должен указать цифру в качестве переменной функции. Так, через обработчик, связанный с функцией, были произведены вычисления и выведены на экран.
<!DOCTYPE HTML>
<html>
<head>
<metacharset=»utf-8″><script>
varresult =1;
functioncountPow(n) {
for(var i=1; i<=5; i++) {
result*=n;
alert(«В » + i +»-ой степени результат равен: «+ result);
}
}
</script>
</head>
<body>
<inputtype=»button» onclick=»countPow(3)» value=»Узнать 5 степеней числа!»/>
</body>
</html>
Этот способ пользуется спросом у разработчиков. Но он не самый популярный, поскольку не всегда удобно делать привязку событий таким образом. Иногда лучшее решение для задачи – предусмотреть гибкую привязку объектов к событиям, применяя их свойства. .
Свойства DOM-элементов («DocumentObjectModel»)
DOM – основной инструмент для выполнения разных манипуляций и изменений над элементами страницы. Поскольку DOM является иерархическим деревом, то к определенным методам и свойствам объектов веб-страницы можно добраться посредством продвижения через конкретные ветви.
Рассмотрим пример – цвет фона меняется со стандартного на синий. Проход по цепочке document.body.style.backgroundColor.
<!DOCTYPE HTML>
<html>
<head>
<metacharset=»utf-8″>
</head><body><inputtype=»button» id=»button» value=»Кнопка» />
<script>
button.onclick = function() {
document.body.style.backgroundColor = ‘blue’;
};
</script></body>
</html>
Использование библиотеки jQuery
С появлением этой библиотеки стало использоваться много дополнительных команд, методов и свойств, которые существенно сокращают и упрощают написанный код. Чаще всего разработчики применяют свойства для получения определенного элемента по его идентификатору (document.getElementById (iden)), имени (document.getElementsByName (name)) или тегу (elem.getElementsByTagName (tag)).
Для наглядности приведем очередной пример:
<!DOCTYPE HTML>
<html>
<head>
<title>Работа с jQuery</title>
<metacharset=»utf-8″>
</head>
<body><p id=»zona»>Осторожно! Если ты нажмете на кнопку, то произойдут изменения с данным контентом.</p>
<buttononclick=»SupperButton()»>Рискни, нажми на меня!</button>
<script>
functionSupperButton() {
document.getElementById(«zona»).innerHTML = «Молодец! Ты прошел испытание на смелость! «;
document.getElementById(«zona»).style.color = ‘red’;document.getElementById(«zona»).style.fontSize = ’32px’;
}
</script></body>
</html>
Если во все вникнуть, вы поймете, что здесь нет ничего сложного. Не забудьте оставить комментарии, если вам было что-то не понятно или поделитесь своим опытом.
