Kdykoli navštívíte webovou stránku, pravděpodobně kliknete na něco jako odkaz nebo tlačítko.
Odkazy vás zavedou na určitou část stránky, jinou stránku webu nebo úplně jinou webovou stránku. Na druhou stranu tlačítka jsou obvykle manipulována událostmi JavaScriptu, takže mohou spouštět určité funkce.
V tomto tutoriálu prozkoumáme dva různé způsoby provádění událostí kliknutí v JavaScriptu pomocí dvou různých metod.
Nejprve se podíváme na tradiční onclick styl, který uděláte přímo ze stránky HTML. Pak uvidíme, jak modernější "klik" eventListner funguje, což vám umožní oddělit HTML od JavaScriptu.
Jak používat onclick událost v JavaScriptu
onclick událost spustí určitou funkcionalitu při kliknutí na tlačítko. Může to být, když uživatel odešle formulář, když změníte určitý obsah na webové stránce a další podobné věci.
Funkci JavaScriptu, kterou chcete spustit, umístíte do úvodní značky tlačítka.
Základní onclick syntaxe
<element onclick="functionToExecute()">Click</element>
Například
<button onclick="functionToExecute()">Click</button>
Všimněte si, že onclick atribut je čistě JavaScript. Hodnota, kterou nabývá, což je funkce, kterou chcete provést, mluví za vše, protože je vyvolána přímo v úvodní značce.
V JavaScriptu vyvoláte funkci voláním jejího názvu a poté za identifikátor funkce (název) vložíte závorku.
onclick příklad události
Připravil jsem nějaké základní HTML s trochou stylingu, takže můžeme vložit onclick událost do reálné praxe.
<div>
<p class="name">freeCodeCamp</p>
<button>Change to Blue</button>
</div>
A tady je CSS, aby to vypadalo dobře, spolu se zbytkem ukázkového kódu:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
font-size: 2rem;
}
button {
padding: 7px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
button.green {
background-color: #2ecc71;
}
button.orange {
background-color: orangered;
}
Takže na webové stránce máme toto:
Naším cílem je změnit barvu textu na modrou, když klikneme na tlačítko. Potřebujeme tedy přidat onclick atribut našemu tlačítku a poté napište funkci JavaScript pro změnu barvy.
Potřebujeme tedy provést malou změnu v našem HTML:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor()">Change to Blue</button>
</div>
Funkce, kterou chceme provést, je changeColor() . Musíme to tedy zapsat do souboru JavaScript nebo do souboru HTML uvnitř <script> tag.
Pokud chcete napsat skript do souboru JavaScript, musíte jej propojit v HTML pomocí níže uvedené syntaxe:
<script src="path-to-javascript-file"></script>
Pokud chcete napsat skript do souboru HTML, stačí jej umístit do značky skriptu:
<script>
// Your Scripts
</script>
Nyní napíšeme naše changeColor() funkce.
Nejprve musíme vybrat prvek, se kterým chceme manipulovat, což je text freeCodeCamp uvnitř <p> tag.
V JavaScriptu to uděláte pomocí getElementById() modelu DOM , getElementsByClassName() nebo querySelector() metody. Potom uložíte hodnotu do proměnné.
V tomto tutoriálu budu používat querySelector() protože je modernější a rychlejší. Budu také používat const deklarovat naše proměnné místo let a var , protože s const , věci jsou bezpečnější, protože se proměnná stává pouze pro čtení.
const name = document.querySelector(".name");
Nyní, když máme vybraný text, napíšeme naši funkci. V JavaScriptu vypadá základní syntaxe funkce takto:
function funcctionName () {
// What to do
}
Napišme tedy naši funkci:
function changeColor() {
name.style.color = "blue";
}
Co se děje?
Z kódu HTML si zapamatujte, že changeColor() je funkce, kterou budeme provádět. Proto je náš identifikátor funkce (název) nastaven na changeColor . Pokud název nekoreluje s tím, co je v HTML, nebude to fungovat.
V DOM (Document Object Model, odkazuje na celý HTML), chcete-li změnit cokoli, co se týká stylu, musíte napsat „style“ a poté tečku (.). Následuje, co chcete změnit, což může být barva, barva pozadí, velikost písma atd.
Takže uvnitř naší funkce vezmeme proměnnou názvu, kterou jsme deklarovali, abychom získali text freeCodeCamp, a poté změníme barvu na modrou.
Při každém kliknutí na tlačítko se barva našeho textu změní na modrou:
Náš kód funguje!
Mohli bychom věci posunout o něco dále změnou našeho textu tak, aby byl více barev:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor('blue')" class="blue">Blue</button>
<button onclick="changeColor('green')" class="green">Green</button>
<button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>
Chceme tedy změnit text na modrý, zelený a oranžovo-červený.
Tentokrát onclick funkce v našem HTML přebírají hodnoty barvy, na kterou chceme text změnit. Těmto parametrům se v JavaScriptu říká parametry. Funkce, kterou napíšeme, má také svou vlastní, kterou budeme nazývat „barva“.
Naše webová stránka se trochu změnila:
Vyberme tedy náš freeCodeCamp text a napišme funkci, která změní jeho barvu na modrou, zelenou a oranžovo-červenou:
const name = document.querySelector(".name");
function changeColor(color) {
name.style.color = color;
}
Blok kódu ve funkci přebírá proměnnou name (kam jsme uložili text freeCodeCamp), pak nastaví barvu na cokoli, co jsme předali do changeColor() funkce v tlačítkách HTML.
Jak používat click eventListener v JavaScript
V JavaScriptu existuje několik způsobů, jak udělat totéž. Jak se samotný JavaScript postupem času vyvíjel, začali jsme potřebovat oddělit kód HTML, CSS a JavaScript, abychom dodrželi osvědčené postupy.
Posluchače událostí to umožňují, protože umožňují oddělit JavaScript od HTML. Můžete to udělat také pomocí onclick, ale zde se podívejme na jiný přístup.
Základní eventListener syntaxe
element.addEventListener("type-of-event", functionToExecute)
Nyní změňme text freeCodeCampt na modrý pomocí click eventListner
Toto je náš nový HTML:
<div>
<p class="name">freeCodeCamp</p>
<button>Change Color</button>
</div>
A takhle to vypadá:
Tentokrát v našem skriptu musíme vybrat také tlačítko (nejen text freeCodeCamp). Je to proto, že v úvodní značce našeho tlačítka není žádný JavaScript, což je skvělé.
Náš skript tedy vypadá takto:
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
Můžeme také naši funkci zcela oddělit od eventListener a naše funkce zůstanou stále stejné:
btn.addEventListener("click", changeColor);
function changeColor() {
name.style.color = "blue";
}
Jak vytvořit tlačítko „Zobrazit více“ a „Zobrazit méně“ pomocí JavaScrpit
Jedním z nejlepších způsobů, jak se učit, je vytvářet projekty, takže si vezmeme to, co jsme se naučili o onclick a "klikněte" eventListner něco postavit.
Když navštívíte blog, často jako první uvidíte úryvky článků. Poté můžete kliknout na tlačítko „číst více“ a zobrazit zbytek. Zkusme to udělat.
Toto je HTML, se kterým máme co do činění:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty much
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button onclick="showMore()">Show more</button>
Je to jednoduché HTML s několika fakty o freeCodeCamp. A je tu tlačítko, ke kterému již připojujeme onclick na. Funkce, kterou chceme provést, je showMore() , kterou brzy napíšeme.
Bez CSS máme toto:
Není to super ošklivé, ale můžeme to udělat lépe a chovat se tak, jak chceme. Takže máme nějaké CSS, které vysvětlím níže:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
article {
width: 400px;
background: #fff;
padding: 20px 20px 0;
font-size: 18px;
max-height: 270px;
overflow: hidden;
transition: max-height 1s;
text-align: justify;
margin-top: 20px;
}
p {
margin-bottom: 16px;
}
article.open {
max-height: 1000px;
}
button {
background: #0e0b22;
color: #fff;
padding: 0.6rem;
margin-top: 20px;
border: none;
border-radius: 4px;
}
button:hover {
cursor: pointer;
background: #1e1d25;
}
</style>
Co dělá CSS?
S univerzálním voličem (* ), odstraňujeme výchozí okraj a odsazení přiřazené k prvkům, abychom mohli přidat vlastní okraj a odsazení.
Také máme velikost boxu nastavenou na border-box, takže můžeme zahrnout výplň a okraj do celkové šířky a výšky našich prvků.
Vše v těle jsme vycentrovali pomocí Flexboxu a dali jsme tomu světle šedé pozadí.
Naše <article> prvek, který obsahuje text, má šířku 400px , bílé pozadí (#fff) a má odsazení 20 pixelů nahoře, 20 vlevo a vpravo a 0 dole.
Značky odstavců v něm mají velikost písma 18 pixelů a pak jsme jim dali maximální výšku 270px . Vzhledem k maximální výšce prvku článku nebude veškerý text obsažen a bude přetékat. Abychom to napravili, nastavili jsme přetečení na skryté, aby se tento text zpočátku nezobrazoval.
Vlastnost přechodu zajišťuje, že ke každé změně dojde po 1 sekundě. Veškerý text uvnitř article jsou zarovnané a mají horní okraj 20 pixelů, takže nezůstávají příliš připojeny k horní části stránky.
Protože jsme odstranili výchozí okraj, naše odstavce se spojily. Nastavili jsme tedy spodní okraj na 16 pixelů, abychom je od sebe oddělili.
Náš selektor, article.open , má vlastnost max-height nastavte na 1000px . To znamená, že kdykoli má prvek article třídu open připojené k ní se maximální výška změní z 270px na 1000px ukázat zbytek článku. To je možné pomocí JavaScriptu – našeho herního měniče.
Náš knoflík jsme stylizovali s tmavým pozadím a udělali jsme jej bílý. Nastavili jsme jeho ohraničení na žádné, abychom odstranili výchozí ohraničení HTML tlačítek, a přiřadili jsme mu poloměr ohraničení 4px takže má mírně zaoblený okraj.
Nakonec jsme použili hover pseudotřídy v CSS pro změnu kurzoru tlačítka na ukazatel. Barva pozadí se mírně změní, když na ni uživatel najede kurzorem.
Tady to je – to je CSS.
Naše stránka teď vypadá lépe:
Další věc, kterou musíme udělat, je napsat náš JavaScript, abychom viděli zbytek článku, který je skrytý.
Máme onclick atribut uvnitř naší značky pro otevírání tlačítka připraven ke spuštění showMore() funkce, tak pojďme napsat funkci.
Nejprve musíme vybrat náš článek, protože musíme ukázat zbytek:
const article = document.querySelector("#content");
Další věc, kterou musíme udělat, je napsat funkci showMore() takže můžeme přepínat mezi zobrazením zbytku článku a jeho skrytím.
function showMore() {
if (article.className == "open") {
// read less
article.className = "";
button.innerHTML = "Show more";
} else {
//read more
article.className = "open";
button.innerHTML = "Show less";
}
}
Co funkce dělá?
Používáme if…else prohlášení zde. Toto je klíčová část JavaScriptu, která vám pomáhá při rozhodování v kódu, pokud je splněna určitá podmínka.
Základní syntaxe vypadá takto:
if (condition == "something") {
// Do something
} else {
// Do something else
}
Zde platí, že pokud se název třídy článku rovná open (to znamená, že k němu chceme přidat třídu open, která byla v CSS nastavena na maximální výšku 1000px), pak chceme vidět zbytek článku . Jinak chceme, aby se článek vrátil do původního stavu, kdy je jeho část skryta.
Děláme to tak, že mu přiřadíme třídu open v bloku else, díky čemuž se zobrazí zbytek článku. Poté nastavíme třídu na prázdný řetězec (none) v bloku if, čímž se vrátí do původního stavu.
Náš kód funguje dobře s hladkým přechodem:
Můžeme oddělit HTML a JavaScript a stále používat onclick , protože onclick je JavaScript. Je tedy možné toto zapsat do souboru JavaScript místo toho, abyste začínali v HTML.
button.onclick = function () {
if (article.className == "open") {
// read less
article.className = "";
button.innerHTML = "Show more";
} else {
//read more
article.className = "open";
button.innerHTML = "Show less";
}
};
Můžeme to udělat také pomocí eventListner:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
many more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty more
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button id="read-more">Show more</button>
const article = document.querySelector("#content");
const button = document.querySelector("#read-more");
button.addEventListener("click", readMore);
function readMore() {
if (article.className == "open") {
// Read less
article.className = "";
button.innerHTML = "Show more";
} else {
article.className = "open";
button.innerHTML = "Show less";
}
}
Naše funkce zůstávají stejné!
Závěr
Doufám, že vám tento tutoriál pomůže pochopit, jak událost kliknutí funguje v JavaScriptu. Zde jsme prozkoumali dvě různé metody, takže je nyní můžete začít používat ve svých projektech kódování.
Děkujeme za přečtení a pokračujte v kódování.