В этой статья — небольшой мануал, как использовать события в javascript.
Для примера сделаем кнопку, которая скрывает ваши контакты, как на авито. Это весьма полезная функция для того, чтобы ваш e-mail или телефон не попал в базу спамеров.
Для начала разметим на странице кнопку:
<button style="padding: 10px 30px; 10px; 30px;border-radius: 5px; border: solid 1px lightgray;">Показать e-mail</button>
Как видите, я ее немного разукрасил. Элементы лучше разукрашивать в отдельных тегах <style> в заголовке странице, а еще лучше — в отдельных css-файлах. Почему, вы поймете позже, а пока пойдет и так:
Красавица, правда? По задумке, по нажатию пользователь должен получат свой e-mail. Такой подход защитит вас от парсеров сайтов на предмет e-mail адресов. Но как видите, сейчас, когда мы нажимаем — ничего не происходит.
Для того, чтобы наша кнопка заработала, напишем перед кнопкой функцию:
<script>
function mailshow(element)
{
alert(element.innerText);
}
</script>
element в этом случае — это элемент, относительно которого произошло событие onclick. Теперь подпишем нажатие кнопки на выполнение этой функции onclick=mailshow(this):
<button onclick=mailshow(this) style="padding:10px 30px; 10px; 30px;border-radius:5px;border: solid 1px lightgray">Показать e-mail</button>
B вот что мы должны получить в итоге:
Так мы убедились, что наша кнопка работает. Ну что ж. Немного видоизменим нашу функцию, чтобы e-mail появлялся на месте кнопки:
<script>
function mailshow(element)
{
element.style.display = "None";
var eml = document.createElement('div');
eml.style.fontWeight = "Bold";
eml.innerText = "digital" + String.fromCharCode(64) + "ya" + String.fromCharCode(46) + "ru";
eml.style.padding = "10px";
eml.style.border = "1px";
document.getElementById("mesbox").appendChild(eml);
}
</script>
И чтобы наш скрипт работал, поместим кнопку в div с id="mesbox"
<div id="mesbox"> <button onclick=mailshow(this) style="padding:10px 30px; 10px; 30px;border-radius:5px;border: solid 1px lightgray">Показать e-mail</button> </div>
И на выходе получили работающий код:
Конечно, этот скрипт не даст вам 100% гарантии защиты ваших персональных данных, например, от парсера с использовании технологии selenium. Для защиты от нее лучше использовать изображения вместо текста, но это уже та грань, когда ради защиты необходимо пожертвовать удобством пользователя
от