Приветствую всех, кто желает разобраться в функционировании onclick (). Сегодняшняя статья поможет вам раз и навсегда понять принцип работы данного обработчика событий и разобрать конкретный пример onclick JavaScript, а точнее примеры.
Я покажу вам несколько способов работы с данным инструментом, объясню в чем их преимущества и недостатки, а также опишу работу jQuery с событиями. А теперь перейдем к разбору материала!
Назначение обработчиков событий
Для начала разберем теоретическую часть вопроса. Практически все веб-сайты на своих страницах обрабатывают скрипты. А обычно это различные события. Чтобы все эти запрограммированные события сработали, для них необходимо установить обработчик.
По правилам написания все обработчики включают в свое название «on+наименование события», что и соблюдено в onclick (). В зависимости от выбранного события обработка будет происходить вследствие разных действий. В нашем случае при использовании onclick () будут выполняться только те event-ы, которые были вызваны левым кликом мышки.
Различные способы назначения событийного обработчика
На сегодняшний день существует несколько вариантов внедрения в код обработчика некого или неких событий.
Использование простых событий
Начнем с простого варианта, который заключается во внедрении onclick () в саму разметку html-документа. Выглядит это следующим образом:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" onclick="alert('Клик-клик!')" value="Кликни на меня и узнаешь, что произойдет."/>
</body>
</html> |
Как вы видите, при нажатии на кнопку левой кнопкой мыши появляется сообщение «Клик-клик!». Хочу обратить ваше внимание на одну маленькую, но существенную деталь. Внутри alert можно использовать только одинарные кавычки (‘’).
Также в данном случае можно использовать ключевое слово this. Оно ссылается на текущий элемент и предоставляет все ему доступные методы.
<button onclick="alert (this.innerHTML='Нажмиии!')">Нажми на меня</button>
Эта строка кода создает кнопку с текстом «Нажми на меня». После нажатия вы увидите на экране сообщение: «'Нажмиии!». Оно и заменит первое название кнопки.
Данный способ, бесспорно, очень прост. Однако он подходит только для аналогичных задач, т.е. вывода сообщений или выполнения простых команд.
Если же необходимо использовать циклические конструкции, задействовать теги и т.д., то данный способ не подходит. Он уменьшит степень читабельности кода, а также сделает его громоздким и неаккуратным.
В таком случае стоит прибегать к функциям.
Работа с функциями
Функции позволяют отделить нужный код в отдельный блок, который впоследствии можно вызывать через событийный обработчик в html-разметке.
В качестве примера я прикрепил приложение для вывода пользователю результирующего числа в различных степенях, начиная с 1-ой и заканчивая 5-ой. Для этого я создал функцию countPow (), в которую можно передавать параметры. В моем приложении юзер должен вписать цифру в качестве переменной функции.
Таким образом, через обработчик, связанный с выше названной функцией, были выполнены вычисления и выведены на экран.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var result =1;
function countPow(n) {
for(var i=1; i<=5; i++) {
result*=n;
alert("В " + i +"-ой степени результат равен: "+ result);
}
}
</script>
</head>
<body>
<input type="button" onclick="countPow(3)" value="Узнать 5 степеней числа!"/>
</body>
</html> |
Данный способ достаточно часто используется при разработке. Однако он не самый популярный, ведь не всегда удобно привязывать события подобным образом. Иногда для решения некоторых задач лучшим вариантом является предусмотреть гибкую привязку объектов к событиям используя их свойства.
Свойства 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 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head><body>
<input type="button" id="button" value="Кнопка" />
<script>
button.onclick = function() {
document.body.style.backgroundColor = 'blue';
};
</script>
</body>
</html> |
Использование библиотеки 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 | <!DOCTYPE HTML>
<html>
<head>
<title>Работа с jQuery</title>
<meta charset="utf-8">
</head>
<body>
<p id="zona">Осторожно! Если ты нажмете на кнопку, то произойдут изменения с данным контентом.</p>
<button onclick="SupperButton()">Рискни, нажми на меня!</button>
<script>
function SupperButton() {
document.getElementById("zona").innerHTML = "Молодец! Ты прошел испытание на смелость! ";
document.getElementById("zona").style.color = 'red';
document.getElementById("zona").style.fontSize = '32px';
}
</script>
</body>
</html> |
Как видите, все работает достаточно просто.
Если вам понравилась моя статья, то обязательно подписывайтесь на обновления. Впереди еще уйма всего интересного и познавательного. Буду благодарен за репосты моих публикаций. Пока-пока!
С уважением, Роман Чуешов
В первом примере не понял, почему alert выскакивает, в коде нет указания на script, что джаваскрипт должен работать. Страница — чистый html код.
Как приведённая функция document.body.style.backgroundColor связана с Document Object Model? Типа, функция автоматом ищет конкретное место цвета фона, а потом меняет его?
Обработчик onclick () срабатывает на клик. Клик состоит из 2-х действий, нажатия и отпускания клавиши. onclick () срабатывает на нажатие или отпускание?
Я подумал, что обработчик onclick () может использоваться и в плохих целях, таком как загрузка пользователю на комп вируса.
Еще на Java Script проверить состояние галочки при клике можно так:
var el = document.getElementById («checkbox_spage»);
el.onclick = function () {
if (el.checked) {
alert («checkbox_spage 1»);
} else {
alert («checkbox_spage 0»);
};
};
DEMO: profi.spage.me/jquery/che...n-jquery-and-js/